0
テキストエリアのテキストの長さが変更されたときに要素の位置が問題になります。テキストエリアのテキストを更新するとCSSの位置が正しくない
HTML： divの位置が相対的であり、 divの位置が子のdivに、絶対的である必要があり子要素を含んでも絶対位置を持っている含まれてい
<body>
<div class="container">
<div class="child">
<div class="bar">
<textarea></textarea>
</div>
</div>
</div>
</body>
コンテナ。
CSS：
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 800px;
height: 500px;
overflow: hidden;
margin: 0 auto
}
.child {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid #000;
}
.bar {
position: absolute;
left: 780px;
top: 50px;
height: 30px;
border: 1px solid #000;
}
.bar textarea {
position: absolute;
left: 0;
top: 0
}
私はtextarea要素にイベントを追加します：
<script type="text/javascript">
$(document).ready(function() {
$('textarea').keyup(function() {
$(this).parent().width($(this).width() + 1);
});
});
</script>
するとテキストエリアへのI入力テキスト、テキストは長さがコンテナ、子要素を克服している場合だろう実際の位置は変わらないが、位置が間違っている。
入力前：入力した後 The textarea position before input image
： The textarea position after input image
ありがとうございますが、まだ動作していません。 –
正確に何をしたいですか？ – Dcoto
テキストエリアにテキストを入力するときに、テキストエリアが左に移動しないようにしたい。 –