1

<pre>...</pre>コンテンツが動的である JavaScript によってレンダリングされるタグ間のコンテンツを取得しようとしています。私がやりたいことは、テキストエリア内に入力を入力して、<pre>タグの表示を更新することです。

<pre>タグ内のコンテンツを指定して、テキストエリアが更新されるたびにテキストエリアから値を取得する方法がわかりません。

どうもありがとう！

4

2 に答える 2

5

作業しているコードを見ると大いに役立ちますが、正しく読んでいれば、これが役立つはずです。次のような HTML を想定します。

<textarea id="type"></textarea>
<pre id="output"></pre>

このオプションは純粋な JavaScript を使用します。

var textarea = document.getElementById('type'),
    pre = document.getElementById('output');

if(textarea.addEventListener) {
    textarea.addEventListener('keyup',function(){
        pre.textContent = this.value;
    });
} else {
    textarea.attachEvent('onkeyup',function(){
        pre.textContent = this.value;
    });
}

このコード ブロックでは、簡潔にするために jQuery ライブラリを使用しています。

$('#type').on('keyup',function(){
    $('#output').text($(this).val());
});

どちらの状況でも、HTML ではなく のテキストを設定していることに注意してください。<pre>これにより、テキストエリアなどに HTML 文字を入力し、要素<内で適切にエスケープすることができます<pre>。

純粋な JavaScript のデモ

jQuery デモ

<pre>を離れた後までを変更したくない場合は、と をそれぞれとに<textarea>変更します。'keyup''onkeyup''change''onchange'

于 2012-08-23T15:50:41.970 に答える
0

onchangeイベントを にバインドし、inputその値を に単純にコピーしますpre。

<pre id="pre">Type something</pre>
<textarea id="text" rows="20" cols="20" />
​
<script type="text/javascript">
document.getElementById("text").onchange = function () {
  document.getElementById("pre").innerHTML = this.value;  
};
</script>

デモ.</p>

于 2012-08-23T15:48:03.190 に答える