如何检测文本框的内容已更改

Posted 2023-02-22

技术标签:

【中文标题】如何检测文本框的内容已更改【英文标题】：How to detect a textbox's content has changed 【发布时间】：2010-12-01 15:44:43 【问题描述】：

我想检测文本框的内容是否发生了变化。我可以使用 keyup 方法，但这也会检测不生成字母的击键，例如箭头键。我想到了两种使用 keyup 事件的方法：

明确检查按键的ascii码是否为字母\退格\删除使用闭包记住击键前文本框中的文本是什么，并检查它是否发生了变化。

两者看起来都有些麻烦。

【问题讨论】：

是的，为此抓键盘很糟糕。您可以在没有任何按键的情况下粘贴内容。您有机会发布您的最终解决方案吗？我也需要解决这个问题:) 或.keyup() event...更多信息在这里：***.com/questions/3003879/… 见$("#some-input").changePolling();用于检查当前值并在其已更改时触发 .change() 的包装器。你也需要检查一下***.com/a/23266812/3160597 【参考方案1】：

开始观察“输入”事件而不是“改变”。

jQuery('#some_text_box').on('input', function() 
    // do your stuff
);

...很好很干净，但可以进一步扩展为：

jQuery('#some_text_box').on('input propertychange paste', function() 
    // do your stuff
);

【讨论】：

'live' 已弃用。所以使用'on'***.com/a/15111970/1724777 'input' 唯一的缺点是它与 IE 输入是 html5 事件，并非所有浏览器都支持。 developer.mozilla.org/en-US/docs/Web/API/window.oninput 您还可以使用以下方法覆盖更多基础：.on('input propertychange paste', function() IE 【参考方案2】：

在 HTML/标准 javascript 中使用 onchange 事件。

在 jQuery 中是 change() 事件。例如：

$('element').change(function() // do something );

编辑

看了一些cmets，怎么样：

$(function() 
    var content = $('#myContent').val();

    $('#myContent').keyup(function()  
        if ($('#myContent').val() != content) 
            content = $('#myContent').val();
            alert('Content has been changed');
        
    );
);

【讨论】：

是的，这与我在问题中选项 #2 中的建议类似。我更喜欢闭包，因为使用全局将使此函数仅适用于一个文本框。无论如何，看起来奇怪的 jquery 没有更简单的方法来做到这一点。这确实很奇怪，但我怀疑有没有更好的方法。您可以使用 setInterval 然后检查内容是否每 0.1 秒更改一次，然后执行某些操作。这还将包括鼠标粘贴等。但听起来不太优雅。仍有可能无需击键即可更改内容，例如通过鼠标粘贴。如果您关心这一点，理论上您也可以捕获鼠标事件，但这种设置更加丑陋。另一方面，如果您愿意忽略鼠标驱动的更改，则可以这样做。【参考方案3】：

“更改”事件无法正常工作，但“输入”是完美的。

$('#your_textbox').bind('input', function() 
    /* This will be fired every time, when textbox's value changes. */
 );

【讨论】：

这非常适合我的情况，尽管从 1.7 开始建议使用 .on（而不是 .bind）。 OP 没有指定需要跨浏览器兼容性。 @schwarzkopfb 提供了一个解决方案。没有理由投票反对，因为您有代表这样做。 @David 他也没有指定哪个浏览器 @jmo21 我认为当浏览器不特定时，我们可以假设 Web 开发的解决方案应该是跨功能的。规范是支持所有浏览器。 @Chris “规范支持所有浏览器” - 仅当您是虐待狂时。对于 IE 8/9 上 2% 的全球用户来说，没有充分的理由避免 HTML5 的优点。 caniuse.com/#feat=input-event【参考方案4】：

这个怎么样：

$("#input").bind("propertychange change keyup paste input", function()
    // do stuff;
);

> jQuery 1.7

$("#input").on("propertychange change keyup paste input", function()
    // do stuff;
);

这适用于 IE8/IE9、FF、Chrome

【讨论】：

我对这个答案的问题是，一旦你模糊了文本框，它就会触发，即使值没有改变。罪魁祸首是“改变”。您在使用 Chrome 吗？似乎这是 chrome 的错误，而不是 jQuery 的更改事件bugs.jquery.com/ticket/9335 可以工作，但是如果您执行 console.log 字段的值，它会在您输入字符时记录两次，但会有一个小错误。然而，我能够找到其他代码，即使这个解决方案也不起作用。数字字段虽然【参考方案5】：

使用闭包记住击键之前复选框中的文本是什么，并检查它是否已更改。

是的。您不一定要使用闭包，但您需要记住旧值并将其与新值进行比较。

但是！这仍然不会捕获所有更改，因为有一种编辑文本框内容的方法不涉及任何按键。例如选择文本范围然后右键单击剪切。或者拖动它。或将其他应用程序中的文本放入文本框中。或通过浏览器的拼写检查更改单词。或者……

因此，如果您必须检测每个更改，则必须对其进行轮询。您可以window.setInterval 每隔（比如说）秒检查该字段与之前的值。您还可以将onkeyup 连接到相同的函数，以便更快地反映由按键引起的变化。

麻烦？是的。但就是这样，或者只是按照正常的 HTML onchange 方式进行操作，不要尝试即时更新。

【讨论】：

现在 HTML5 input 事件是可行的，并且适用于所有主要浏览器的当前版本。【参考方案6】：

$(document).on('input','#mytxtBox',function ()  
 console.log($('#mytxtBox').val());
);

您可以使用“输入”事件来检测文本框中的内容变化。不要使用 'live' 来绑定事件，因为它在 Jquery-1.7 中已被弃用，因此请使用 'on'。

【讨论】：

@NavaRajan 刚刚在 IE9 中再次测试。在退格上确实不起作用。我不想使用 .live，但我遇到的问题是我以某种方式“回到了未来”并且在团队领导想要坚持的 mvc3 项目上“开箱即用”，因此不仅使用 EF 4.0，而且使用 jquery 1.5.1 THUS .on() 不在 1.5.1 中，因为它是在 jquery 版本 1.7 api.jquery.com/on 中添加的【参考方案7】：

我假设您希望在文本框更改时进行交互（即通过 ajax 检索一些数据）。我一直在寻找同样的功能。我知道使用全局不是最强大或最优雅的解决方案，但这就是我所采用的。这是一个例子：

var searchValue = $('#Search').val();
$(function () 
    setTimeout(checkSearchChanged, 0.1);
);

function checkSearchChanged() 
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') 
        searchValue = $('#Search').val();
        $('#submit').click();
    
    else 
        setTimeout(checkSearchChanged, 0.1);

这里要注意的一个关键是我使用的是 setTimeout 而不是 setInterval，因为我不想同时发送多个请求。这确保了在提交表单时计时器“停止”并在请求完成时“启动”。我通过在我的 ajax 调用完成时调用 checkSearchChanged 来做到这一点。显然你可以扩展它来检查最小长度等。

就我而言，我使用的是 ASP.Net MVC，因此您可以在以下帖子中了解如何将其与 MVC Ajax 结合起来：

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

【讨论】：

【参考方案8】：

我会推荐看看 jQuery UI 自动完成小部件。他们在那里处理了大部分案例，因为他们的代码库比那里的大多数案例更成熟。

以下是演示页面的链接，您可以验证它是否有效。 http://jqueryui.com/demos/autocomplete/#default

您将从阅读源代码并了解他们如何解决它中获得最大的好处。你可以在这里找到它：https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js。

基本上他们都做了，他们绑定到input, keydown, keyup, keypress, focus and blur。然后他们对page up, page down, up arrow key and down arrow key等各种键进行特殊处理。在获取文本框的内容之前使用计时器。当用户键入与命令不对应的键（向上键、向下键等）时，会有一个计时器在大约 300 毫秒后探索内容。在代码中是这样的：

// switch statement in the 
switch( event.keyCode ) 
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) 
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            
// ...
// ...
_searchTimeout: function( event ) 
    clearTimeout( this.searching );
    this.searching = this._delay(function()  // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() )  // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        
    , this.options.delay );
,

使用计时器的原因是为了让 UI 有机会更新。当 Javascript 运行时，UI 无法更新，因此调用了延迟函数。这适用于其他情况，例如将注意力集中在文本框（由该代码使用）。

因此，如果您不使用 jQuery UI（或者在我的情况下开发自定义小部件），您可以使用小部件或将代码复制到您自己的小部件中。

【讨论】：

【参考方案9】：

您考虑使用change event 吗？

$("#myTextBox").change(function()  alert("content changed"); );

【讨论】：

AFAIK，仅在元素失去焦点时触发。熟悉闭包的人可能知道这一点。 :) 是的，这不行 - 只有当文本框失去焦点时才会调用更改事件。我想在按下键后立即处理更改。【参考方案10】：

我想问一下，您为什么要实时检测文本框内容的变化？

另一种方法是设置一个计时器（通过 setIntval？）并将上次保存的值与当前值进行比较，然后重置一个计时器。这将保证捕获任何更改，无论是由键、鼠标、您没有考虑到的其他输入设备，甚至是 JavaScript 从应用程序的不同部分更改值（另一种没有人提到的可能性）引起的。

【讨论】：

我的情况（导致我提出这个问题）是，当文本框中的数量发生变化时，我需要显示“更新购物车”按钮。用户不知道他们需要失去焦点，否则可能看不到按钮。抱歉，我不确定这是否能回答“为什么不按计划检查差异”的问题。只要经常检查（每 1/4 秒），用户就不会知道有什么区别。【参考方案11】：

通过自定义 jQuery shim 使用 textchange 事件以实现跨浏览器 input 兼容性。 http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html（最近分叉的 github：https://github.com/pandell/jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js）

这会处理所有输入标签，包括<textarea>content</textarea>，它并不总是适用于change keyup 等（！）只有jQuery on("input propertychange") 始终处理<textarea> 标签，以上是所有人的垫片不理解input事件的浏览器。

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function() 
  yourFunctionHere($(this).val());    );  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

JS Bin test

这还可以处理粘贴、删除，并且不会在 keyup 上重复工作。

如果不使用 shim，请使用 jQuery on("input propertychange") 事件。

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function() 
  yourFunctionHere($(this).val());    
);

【讨论】：

【参考方案12】：

有一个完整的工作示例here。

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() 
$('.calc').on('input', function() 
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
);
);
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

【讨论】：

【参考方案13】：

这样的事情应该可以工作，主要是因为focus 和focusout 最终会得到两个不同的值。我在这里使用data，因为它将值存储在元素中但不触及DOM。这也是一种存储与其元素相关的值的简单方法。您可以轻松地使用更高范围的变量。

var changed = false;

$('textbox').on('focus', function(e) 
    $(this).data('current-val', $(this).text();
);

$('textbox').on('focusout', function(e) 
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    
    console.log('Changed Result', changed);

【讨论】：

【参考方案14】：

此代码检测文本框的内容何时被用户更改并被 Javascript 代码修改。

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() 
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) 
        console.log("changed");
        $myText.data("value", val);
    
, 100);

【讨论】：

【参考方案15】：

document.getElementById('txtrate' + rowCount).onchange = function ()             
       // your logic
;

这个工作正常，但也触发了点击事件，这不好。我的系统进入了循环。而

$('#txtrate'+rowCount).bind('input', function() 
        //your logic
 );

在我的场景中完美运行。它仅在值更改时才有效。也可以使用 document.getElementById 而不是 $ 符号

【讨论】：

以上是关于如何检测文本框的内容已更改的主要内容，如果未能解决你的问题，请参考以下文章

使用源代码管理更改文本框的内容

来自边界框的 Google Vision Api 文本检测布局信息

如何从 c# Windows 窗体中文本框的文本内容更新 datagridview 的列

如何在悬停时更改文本框内容

在文本更改时访问文本框的复制值

如何更改 chrome 中文本框的焦点样式？