如何从javascript检测文本框更改事件答案

【问题标题】：How to detect textbox change event from javascript如何从javascript检测文本框更改事件
【发布时间】：2011-04-26 06:30:29
【问题描述】：

我有一个文本框 asp.net 服务器控件。我正在从javascript修改文本框的值，我想检测文本框文本何时更改。我尝试了 onchange 事件，当文本更改时，它会在丢失的焦点上被调用。但在我的情况下，我从 Javascript 更改文本。我怎样才能做到这一点？

【问题讨论】：

标签： javascript asp.net

【解决方案1】：

更新value 属性不会触发更改事件。更改事件由用户触发。

您可以编写一个函数来更改值并执行您需要做的任何其他事情...

function changeTextarea(str) {
   document.getElementById('a').value = str;
   // Whatever else you need to do.
}

...或轮询textarea 的值...

(function() {
   var text = getText();   
   var getText = function() {
      return document.getElementById('a').value;
   }  

   setInterval(function() {
      var newtext = getText();
      if (text !== newText) {
          // The value has changed.
      }
      text = newText; 
   }, 100);
})();

...或自己显式调用onchange() 事件。

document.getElementById('a').onchange();

（假设您使用onchange 属性设置事件。）

变通办法并不是非常好的解决方案。无论哪种方式，您都需要在更新textarea 的value 属性时进行一些干预以触发额外代码。

【讨论】：

@Cos 那是 jQuery，OP 从未提及。您还明确调用change()，这基本上是我在回答中建议的。
@Cos jQuery 是用 JavaScript 写的？真的吗？
+1 不仅仅是给出一个 jQuery 答案。无论如何，我认为 jQuery 是用独角兽灰尘和小精灵蛋糕编写的。你每天都会学到新东西。
@Alex。我的观点是，如果 OP 已经在使用 javascript，那么包含和使用 jquery 就没有障碍。当然，这是对您的评论的回应，即 OP 从未提及 JQuery，就好像 javascript 和 jquery 之间存在巨大的鸿沟一样。我觉得有趣的是，您将原始答案从 “您不能……除非……” 扩展为有用的答案。现在 OP 有一些解决方案的选择。
@Cos 我刚刚澄清了答案中的要点。添加 jQuery 实现起来很简单，但有些人可能不想这样做是有正当理由的。

【解决方案2】：

您可以强制从 javascript 回发，从而强制页面重新加载事件。在 Page.GetPostBackEventReference() 中，您可以处理事件并可能触发其他事件。

虽然这不是一个好的解决方案，但我真的建议您通过 javascript 完成所有工作，或者放弃 javascript 并让 .NET 处理所有事情，也许使用 Ajax.NET

下面的link 解释了如何为普通按钮执行此操作，但为 onchange 事件制作它应该不难。

【讨论】：

【解决方案3】：

使用 Jquery，您可以分配一个“更改”处理程序并像这样调用该处理程序：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //makes 'DetectChange' the handler when TextBox1 changes...
            $('#TextBox1').change(function () {
                DetectChange();
            });
         });

        function DetectChange() {
            alert("TextBox1 has been changed");
        }

        function ClickTheButton() {
            // .val actually 'changes the value'
            // while you have to add .change() to invoke the actual change event handler...
            $('#TextBox1').val("Changed When Button Clicked").change();

            //return false prevents the click event of the button from doing a post back
            //keeping everything on the client for this sample..
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input id="Button1" type="button" value="Change TextBox1" onclick="return ClickTheButton();"  />
    </div>
    </form>
</body>
</html>

【讨论】：

为什么不直接将DetectChange传递给click()方法呢？
@Alex OP 声明But in my case i an changing text from Javascript 所以我使用按钮的点击事件来模拟场景的那个元素。我不知道 javascript OP 使用“什么”或它是如何调用的，所以我只是制作了可以做类似事情的演示。您是正确的，可以通过点击调用.change，如果这符合 OP 的需求，那就太好了。

【解决方案4】：

如果你可以使用 jQuery，它会是这样的

$('#id_of_text_area').change(function(){
    //do something
});

【讨论】：