Javascript Jquery文本更改事件

我需要在文本框的内容发生变化时触发事件

我不能使用键控也不能使用按键

如果按住键，则“向上键”和“向下键”不起作用

在文本实际更改之前，按键触发。它也不识别backspace或delete

所以现在我假设我必须构建一些自定义逻辑或下载一个插件。有插件吗？或者，如果我应该构建一个，我应该注意哪些约束

例如，Facebook是通过在顶部搜索来实现的。你可以按住

---

另一个例子是写一个stackoverflow问题。在编辑器的正下方，内容被实时复制，退格，一切正常。他们是怎么做的？

投票怎么样？执行

setInterval

并调用一个函数，每隔500毫秒检查一次文本？无论如何，您都不想检测每个键上的内容更改，因为在一些较旧的浏览器/较旧的计算机上，它会变得有点慢，并且您会注意到键入和文本显示之间的延迟。

您需要一个观察者类型的功能

---

如果其他功能不可用，它会求助于setInterval轮询：

我刚刚查看了SO的源代码。看起来他们做了很多类似的事情：

---

他们做了一些额外的工作，为粗体、斜体和链接等制作HTML标记，并计时。如果生成HTML的时间太长，它们会将延迟从1增加到更长。

我成功地使用了jQuery（在Chrome中）。如果按住一个键，它会计算每一次更改，而不仅仅是第一次更改，并且会计算非打印键（如backspace）

HTML

<input id="txt" type="text" />
<span id="changeCount">0</span>

正如我上面所说的，您需要过滤掉所有不改变文本的键代码，如ctrl、shift、alt、enter等。如果在文本框为空时按backspace或delete键，或者如果文本框具有最大长度并按下可打印键，则还有一个边界条件，但处理这些问题也不是非常困难

---

这是一个可行的解决方案。

我有一个简单的解决方案，我们很乐意在我们的一个项目中使用

你可以试试@

delayRun（）函数

---

Zurb有一个很棒的插件，它可能对你有用

---

@Jason Gennaro，一个混合了格式化和显示文本框更改并将其发送到服务器的程序。明白了@pixelfreak有一个好主意，下面是三种检测文本变化的方法（来自另一个问题：）看起来，如果你绑定到“输入”事件，它会正常工作。您好，这对我来说很好，除了按键事件之外，您还可以添加粘贴事件来检测像这样的所有文本更改$（'textarea'）.bind（'paste'，function（）{setTimeout（updatePreview，1）；}）；​

<input id="txt" type="text" />
<span id="changeCount">0</span>

$('#txt').keydown(function(event) {
    // Don't count the keys which don't actually change
    // the text. The four below are the arrow keys, but
    // there are more that I omitted for brevity.
    if (event.which != 37 && event.which != 38 &&
        event.which != 39 && event.which != 40) {

        // Replace the two lines below with whatever you want to
        // do when the text changes.
        var count = parseInt($('#changeCount').text(), 10) + 1;
        $('#changeCount').text(count);

    }
});

var i = 0;
$('#text').bind('check_changed', function(){
    var t = $(this);

    // do something after certain interval, for better performance
    delayRun('my_text', function(){
        var pv = t.data('prev_val');

        // if previous value is undefined or not equals to the current value then blablabla
        if(pv == undefined || pv != t.val()){
            $('#count').html(++i);
            t.data('prev_val', t.val());
        }
    }, 1000);
})
// if the textbox is changed via typing
.keydown(function(){$(this).trigger('check_changed')})
// if the textbox is changed via 'paste' action from mouse context menu
.bind('paste', function(){$(this).trigger('check_changed')});

// clicking the flush button can force all pending functions to be run immediately
// e.g., if you want to submit the form, all delayed functions or validations should be called before submitting. 
// delayRun.flush() is the method for this purpose
$('#flush').click(function(){ delayRun.flush(); });

;(function(g){
    var delayRuns = {};
    var allFuncs = {};

    g.delayRun = function(id, func, delay){
        if(delay == undefined) delay = 200;
        if(delayRuns[id] != null){
            clearTimeout(delayRuns[id]);
            delete delayRuns[id];
            delete allFuncs[id];
        }
        allFuncs[id] = func;
        delayRuns[id] = setTimeout(function(){
            func();
            delete allFuncs[id];
            delete delayRuns[id];
        }, delay);
    };

    g.delayRun.flush = function(){
        for(var i in delayRuns){
            if(delayRuns.hasOwnProperty(i)){
                clearTimeout(delayRuns[i]);
                allFuncs[i]();
                delete delayRuns[i];
                delete allFuncs[i];
            }
        }
    };
})(window);