js 小技巧之监听TextBox文本框内容变化

在实际工作中遇见一个问题，需要监听input中的值变化，开始使用的是监听keyup事件，但这样做有弊端，就是在用右键剪切调里面的内容时，因为没有键盘操作，所以无法触发keyup，同理在粘贴时也存在该现象，于是在查找相关知识后，发现有一个oncut和onparste事件，这两个的确可以监听到鼠标的剪切，粘贴动作，可是无法得到剪切后的值，也就是说他是在改变input内容之前触发的，得到的是未操作前的值，因此也不适用。最后通过一个定时器实现了该效果，如下：

var tValue;

 setInterval(function(event){
       if(tValue !=document.getElementById("txt").value){

         //这里写自己的业务逻辑代码
         tValue =document.getElementById("txt").value;
       }
  },100);

原理很简单，就是在外部先声明一个用来记录input值的变量，然后每0.1秒比较这个值与input的值，如果发生改变，则运行自己的代码，同事改变变量。从而实现对input值改变的监听。

 

本人测试实例：

 <script type="text/javascript">
        var tValue="";
        setInterval(function (event) {
            var value = document.getElementById("TextBoxName").value;
            if (tValue != value) {
                alert(value);
                tValue = document.getElementById("TextBoxName").value;
            }
        }, 100);
    </script>

学生姓名：<asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox>