動態調整輸入大小

我已經有了一段jQTouch/jQuery頁面的代碼，可以動態調整輸入窗口的innerWidth的大小 - 關聯的標籤寬度 - 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面板。當輸入和標籤不在第一個面板上時，有沒有人有任何關於如何讓代碼調整輸入大小的建議？

來源

2010-01-19 DataZombies

當有多個div時會發生什麼？只有第一個div中的輸入被調整大小？ – eliah 2010-01-19 01:35:04

這是正確的。 – DataZombies 2010-01-27 01:14:57

$('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-23 08:45:18 Michael

動態調整輸入大小

回答

相關問題