Question

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

我无法使用 keyup ，也无法使用按键。

如果你按住键，键盘和键盘将不起作用。

Keypress在文本实际更改之前触发。它无法识别退格或删除。

所以现在我假设我将不得不构建一些自定义逻辑或下载插件。那里有插件吗？或者，如果我应该建立一个，我应该注意什么约束？

例如。 Facebook通过顶级搜索来实现这一目标。你可以按住。

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

Answer 1

我刚刚看了一下SO的来源。看起来他们做的事情很像this：

function updatePreview(){
    $('div').text($('textarea').val());
}

$('textarea').bind('keypress', function(){
        setTimeout(updatePreview, 1);
    }
);

他们做了一些额外的事情来制作用于粗体和斜体以及链接等的HTML标签，并且他们计时。如果生成HTML需要很长时间，它们会将延迟从1增加到更长。

Answer 2

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

<强> HTML

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

<强>的JavaScript

$('#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);

    }
});

就像我上面说过的那样，你要过滤掉所有不改变文字的键码，比如 ctrl ， shift ， alt ，输入等。当文本框为空或按下退格或删除键时，还有边界条件如果文本框具有最大长度并且按下了可打印键，但处理它们也不是非常困难。

这是一个有效的jsfiddle example。

Answer 3

投票怎么样？做一个setInterval并调用一个检查文字的功能每隔500毫秒说一次？您不希望检测每个键上的内容更改，因为它在某些较旧的浏览器/旧计算机中变得有点慢，您会发现键入和文本显示之间存在延迟。

Answer 4

您需要观察者类型功能。

如果其他功能不可用，它会转到setInterval轮询：http://james.padolsey.com/javascript/monitoring-dom-properties/

Answer 5

我有一个简单的解决方案，我们在其中一个项目中愉快地使用。

你可以试试@ http://jsfiddle.net/zSFdp/17/

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(); });

delayRun（）函数

;(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);

Answer 6

Zurb有一个很棒的插件，可能对你有用 http://www.zurb.com/playground/jquery-text-change-custom-event

Jquery文本更改事件

6 个答案: