下面是一个不使用jQuery的解决方案(它真的很过时，现在没有必要了)

使用事件“input”，你可以查找任何类型的变化:

删除，后退，粘贴，输入，任何会改变输入值的东西。

输入事件与文本输入直接相关。当文本以任何方式被更改时，输入就会被分派。

document.querySelector(“# testInput”)。addEventListener(“输入”,测试); 功能测试(e) { var a = document.getElementById('output'); a.innerText += "检测到更新!\n"; ｝ <输入id = " testInput " > < br > <一个id = "输出" > < / >

我已经创建了一个样本。希望它对你有用。

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

不幸的是，我认为setInterval胜出了:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

这是最简洁的解决方案，只有一行代码。它也是最健壮的，因为您不必担心输入可以获得值的所有不同事件/方式。

在这种情况下，使用'setInterval'的缺点似乎并不适用:

100ms的延迟?对于许多应用程序来说，100ms已经足够快了。 增加了浏览器的负载?一般来说，在页面上添加大量的重量级setinterval是不好的。但在这种特殊情况下，无法检测到添加的页面负载。 它不能扩展到很多输入?大多数页面的输入不超过几个，您可以在同一个setInterval中嗅探所有输入。

您可以简单地识别表单中的所有更改者，如下所示

           //when form change, show aleart
            $("#FormId").change(function () {
                aleart('Done some change on form');
            }); 

下面是一个工作示例，我使用它来实现一个填充jqueryui选择器(列表)的自动补全变体，但我不希望它的功能完全像jqueryui自动补全那样做一个下拉菜单。

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

你就不能用<span contenteditable="true" spellcheck="false">元素来代替<input type="text">吗?

<span>(以contenteditable="true" spellcheck="false"作为属性)与<input>区别很大，主要是因为:

它的样式不是<input>。 它没有value属性，但文本被呈现为innerText，并成为其内部主体的一部分。 它是multiline，而<input>不是，尽管你设置了属性multiline="true"。

要完成外观，当然，你可以用CSS样式，而将值写成innerText，你可以为它获得一个事件:

这是小提琴。

不幸的是，有一些东西在IE和Edge中实际上不起作用，我无法找到。