2

ウィンドウのinnerWidth（関連するラベル幅-50px）への入力のサイズを動的に変更するjQTouch/jQueryページのこのコードがあります。

<html>
<head>
<title>resizeInputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "jqtouch/themes/apple/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="application/javascript"></script>
<script src="jqtouch/jqtouch.min.js" type="application/javascript"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
  statusBar: 'default'
});

$(document).ready(function () { 
  function resizeInputs () { 
    $($("input").filter("[type='email'],[type='tel'],[type='text'],[type='url']")).each(function () { 
    $(this).css("width", window.innerWidth - $(this).siblings("label").width() - 50 + "px"); 
    console.log($(this).attr("id")+": " +$(this).siblings("label").length+": "+$(this).siblings("label").width()); 
    }); 
  };
  resizeInputs();
  $("body").bind("turn", resizeInputs);
}); 
</script>

HTMLは...

<div id="pnl"> 
  <div class="toolbar"> 
    <h1>resizeInputs</h1> 
  </div> 
  <ul class="edit rounded"> 
    <li> 
      <label for="in1">Input 1</label> 
      <input id="in1" type="text" pattern="\d*" /> 
    </li> 
    <li> 
      <label for="in2">REAAALLLY LONG LABEL</label> 
      <input id="in2" type="url" /> 
    </li> 
  </ul> 
</div>

アプリにdivパネルが1つしかない場合は、うまく機能します。入力とラベルが最初のパネルにないときに、このコードを取得して入力のサイズを変更する方法について誰かが提案していますか？

4

1 に答える 1

1 
$('input[type=text]').bind('keydown keyup',function(){

    $(this).after('<span class="temp">' + $(this).val() + '</span>');

    var minWidth = 50,
        width = ($(this).next('span.temp').width() > minWidth ) ? $(this).next('span.temp').width() : minWidth ;

    $(this).css('width', width + 20).next('span.temp').remove();

});
于 2011-08-23T08:45:18.103 に答える