Question

我有一段jQTouch / jQuery页面的代码，可以动态调整窗口内部宽度的输入 - 相关的标签宽度 - 50px。

<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面板，那么效果很好。当输入和标签不在第一个面板上时，有没有人建议如何让这段代码调整输入大小？

Answer 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();

});

动态调整输入大小

1 个答案: