テキストボックスの動的拡張/長くなる例
1843 ワード
htmlテストソース:
同様の大きさの非表示のtextareaを追加し、可視のtextareaに入力イベント「FF、chrome」、または属性変化イベントがある場合「IE」、可視のtextareaの内容を非表示のtextareaにコピーする.
非表示のtextareaが設定されているとスクロールボックスが表示され、非表示のtextareaのスクロール長さが取得され、後で表示されるtextareaのheightプロパティに設定されます.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function resize(){
var source = document.getElementById("source");
var hidetext = document.getElementById("hidetext");
hidetext.value = source.value;
var l = document.getElementById("l");
l.innerText = hidetext.scrollHeight;
if (hidetext.scrollHeight < 500) {
source.style.height = hidetext.scrollHeight-25;
}else{
source.style.height = 500;
source.style.overflow-y = "auto"; // ， Jquery
}
}
</script>
</head>
<body>
<textarea id="source" name="text" wrap="SOFT" tabindex="0" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" style="box-sizing: border-box; overflow-y: hidden; overflow-x: auto; padding-right: 20px; height: 100px; padding-bottom: 32px; resize:none;" oninput="javascript:resize();" onpropertychange="javascript:resize();"></textarea>
<br/>
<label id="l"></label>
<br/>
<textarea id="hidetext" name="text" wrap="SOFT" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" style="box-sizing: border-box; overflow-y: auto; overflow-x: auto; padding-right: 20px; height: 130px; padding-bottom: 32px; visibility: hidden;"></textarea>
</body>
</html>同様の大きさの非表示のtextareaを追加し、可視のtextareaに入力イベント「FF、chrome」、または属性変化イベントがある場合「IE」、可視のtextareaの内容を非表示のtextareaにコピーする.
非表示のtextareaが設定されているとスクロールボックスが表示され、非表示のtextareaのスクロール長さが取得され、後で表示されるtextareaのheightプロパティに設定されます.