[英]Resize input text field as text is entered
輸入文本時是否可以調整文本輸入框的大小? 我搜索了 web 並沒有找到任何東西。
我剛給你做了一個,在這里試試: http://jsfiddle.net/FNMSP/2/
function autoResize(e){
var ele=e.target; //get the text field
var t=ele.scrollTop; //use scroll top to determine if
ele.scrollTop=0 //space is enough
if(t>0){ //If it needs more space....
ele.style.height=(ele.offsetHeight+t+t)+"px"; //Then add space for it!
}
}
您可以對文本區域執行此操作,
<textarea onkeydown="autoResize(event)">Auto Resize!</textarea>
或者使用下面將 function 附加到每個<textarea>
:
var ele=document.getElementsByTagName("textarea");
for(i=0;i<ele;i++){
ele[i].addEventListener("keydown",autoResize,false)
}
隨意使用它。
非常簡單但奇怪的實現:)
<script>
function enlarge(ele)
{
ele.size += 10;
}
</script>
<form>
<input onkeypress="enlarge(this)" size="10"/>
</form>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function call_me(max_length) {
if((document.form1.mybox.value == null ) ||
(document.form1.mybox.value == "" ))
document.form1.mybox.size = size;
if((document.form1.mybox.value.length >= size) &&
(document.form1.mybox.value.length <= max_length))
document.form1.mybox.size = document.form1.mybox.value.length + 1;
else
document.form1.mybox.size = size;
}
</script>
LastName: <input type="text" style="font-family: Terminal"
name="mybox" maxlength="30" size="10"
onFocus="setInterval('call_me(document.form1.mybox.maxLength)', 1)">
<SCRIPT LANGUAGE="JavaScript">
var size = document.form1.mybox.size;
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.