Question

我想知道为什么以下示例代码无法正常工作：

<!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内容应该实时更新 - 只要textarea内容通过键盘或鼠标更改即可。此方法是oninput事件的替代方法。但由于oninput在不同的浏览器中得不到很好的支持，我决定创建一个计时器，以便在10毫秒之前将当前文本字段值与其值进行比较。

Answer 1

“让我举个例子：在文本字段中输入一个句子。然后选择/突出显示它。现在按下键盘上的”删除“按钮。你在iframe上看不到同样的东西”

问题在于这一行：

if (textarea.value) {

如果textarea为空，即.value为空字符串，则if条件为假，并且不会复制到iframe。只需删除if。

即可

演示：http://jsfiddle.net/4ksMR/1/

（请注意，这是仅的情况，我能够复制您的问题，而更改未反映在iframe中。）

Answer 2

为什么要“轮询”变更？只需附加一个keyup-handler（当有人输入你的textarea-field时会通知你）

textarea.onkeyup = function() {
    // do whatever you want to do here
}

Answer 3

重新考虑你的实现，这里是jquery的简单示例，但肯定可以在任何其他lib甚至核心JS上完成

http://jsbin.com/oraxeb/1

想想这样的改进：

并非每个keyUp都能正常工作，例如Ctrl或箭头或移位或束或其他，这将提高性能
初始默认文字 - 非常简单
可能是别的东西）

setTimeout用于检测文本字段中的更改

3 个答案: