-1

次のサンプルコードが正しく機能しないのはなぜだろうか。

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <style type="text/css">
            textarea, iframe {
                display:block;
                width:300px;
                height:100px;
                margin:3px;
                padding:3px;
                border:1px solid #CCC;
            }
        </style>
    </head>

    <body>
        <textarea id="field" onfocus="getFocus();" onblur="loseFocus();">This is some text.</textarea>
        <iframe name="target"></iframe>
        <script>
            var textarea = document.getElementById('field');
            var iframe = window.target.document;

            function displayResult() {
                if (textarea.value) {
                    iframe.open();
                    iframe.write(textarea.value);
                    iframe.close();
                }
                window.setTimeout(displayResult, 10);
            }

            function getFocus() {
                if (textarea.value == textarea.defaultValue) {
                    textarea.value = '';
                }
            }

            function loseFocus() {
                if (textarea.value == '') {
                    textarea.value = textarea.defaultValue;
                }
            }
            displayResult();
        </script>
    </body>

</html>

デモ： http： //jsfiddle.net/RainLover/4ksMR/

iframeのコンテンツは、テキストエリアのコンテンツがキーボードまたはマウスで変更されるとすぐに、リアルタイムで更新されることになっています。oninputこのアプローチは、イベントの代替手段です。しかし、oninputさまざまなブラウザで十分にサポートされていないため、現在のテキストフィールドの値を10ミリ秒前の値と比較するタイマーを作成することにしました。

4

3 に答える 3

1

「例を挙げましょう。テキストフィールドに文を入力します。次に、それを選択/ハイライトします。次に、キーボードの[削除]ボタンを押します。iframeには同じものは表示されません。」

問題はこの行です：

if (textarea.value) {

が空白の場合textarea、つまり、.valueが空の文字列の場合、if条件は偽であり、iframeへのコピーは行われません。を削除するだけifです。

デモ： http： //jsfiddle.net/4ksMR/1/

（これは、変更がiframeに反映されないという問題を再現できた唯一のケースであることに注意してください。）

于 2012-11-27T20:47:11.867 に答える
0

実装を再考してください。これはjqueryを使用した簡単なサンプルですが、他のlibまたはコアJSで実行される可能性があります。

http://jsbin.com/oraxeb/1

次のような改善について考えてみてください。

  1. Ctrlや矢印、ShiftやBunchなど、すべてのkeyUpが機能するわけではありません。これにより、パフォーマンスが向上します。
  2. 初期のデフォルトテキスト-非常に単純
  3. おそらく何か他のもの）
于 2012-11-27T20:45:58.507 に答える
0

なぜ変更を「ポーリング」するのですか？キーアップハンドラーを追加するだけです（誰かがテキストエリアフィールドに入力したときに通知します）

textarea.onkeyup = function() {
    // do whatever you want to do here
}
于 2012-11-27T20:41:06.157 に答える