Dynamically resize Inputs_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-16 23:45 出处：网络

I\'ve got this piece of code for a jQTouch/jQuery page that dynamically resizes inputs to the window\'s innerWidth - the associated label width - 50px.

I've got this piece of code for a jQTouch/jQuery page that dynamically resizes inputs to the window's innerWidth - the associated label width - 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/javasc开发者_开发问答ript"></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>

The HTML is...

<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>

It works great if you only have one div panel in the app. Does anyone have any suggestion on how to get this code to resize inputs when the inputs and labels are not on the 1st panel?

$('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();

});