setTimeout 检测文本字段的变化答案

【问题标题】：setTimeout to detect changes in a text fieldsetTimeout 检测文本字段的变化
【发布时间】：2012-11-27 20:31:28
【问题描述】：

我想知道为什么下面的示例代码不能正常工作：

<!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 毫秒之前的值。

【问题讨论】：

它应该做什么而不是做什么？我看到一个文本区域，其内容每 10 毫秒（100 倍/秒，非常频繁）写入 iframe。从我对代码的阅读来看，这似乎正是它应该做的。
我们需要比“无法正常工作”更多的信息。你想做什么？它在做什么？
它应该是动态更新 iframe 并将 textarea 内容值写入其中。
@RainLover 这就是它的作用。它在 Chrome 和 FF 中完美运行。
恐怕这不是真的。

标签： javascript iframe textarea

【解决方案1】：

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

问题出在这一行：

if (textarea.value) {

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

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

（请注意，这是唯一案例，我能够复制您的问题，即更改未反映在 iframe 中。）

【讨论】：

您已经赢得了 [特蕾莎修女] 徽章，因为您坚持这一点并设法弄清楚 OP 的期望。
@nnnnnn：感谢您的回答，但我如何设置它以将内容重写到 iframe仅当 textarea 内容发生更改时，如下所示： if (textarea.value != textarea.value.10ms.ago)?
if(textarea.value!=prevValue) { prevValue=textarea.value; /*and update iframe*/ }，其中prevValue 应在您的函数之外声明。
就是这样！非常感谢！ :)

【解决方案2】：

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

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

【讨论】：

...以及用于非键盘编辑的处理程序，包括剪切和粘贴，以及拖放...
然后一起使用 onkeyup 和 onblur 事件。轮询更改只是一个丑陋的解决方案

【解决方案3】：

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

http://jsbin.com/oraxeb/1

想想这样的改进：

并非每个 keyUp 都应该有效，例如 Ctrl 或箭头或 shift 或一堆或其他，这将提高性能
初始默认文本 - 非常简单
可能是别的）

【讨论】：