Question

我有一个textarea，一个按钮和一些下拉列表。用户浏览ddls并回答一些问题，然后根据下拉列表在textarea中生成文本。

在提问的某一点，按钮变得可以提交;我实际上并没有提交页面onclick，我正在做其他客户端的事情。

问题的要点是：如果用户试图编辑textarea，我希望按钮消失（显示：无;）;直接或通过粘贴/上下文菜单。如果用户编辑textarea是可以的，但该按钮不再与应用程序相关。如何检测textarea是否被更改。

编辑：我不能使用jQuery。

Answer 1

change事件是完全可靠的，但只有在textarea失去焦点时才会触发，这意味着只要用户尝试单击该按钮，它就会消失。因此，这确实具有期望的结果，但是具有差的用户体验。

另一种方法是监控textarea的变化，这是变得棘手的地方。如果使用基于事件的方法执行此操作，则需要检测键盘输入，粘贴和拖放。并非所有浏览器都支持粘贴检测（特别是Firefox 2和Opera的所有版本都没有），所以它已经变得棘手了。更简单，更跨浏览但更脏的方法是基于轮询的方法，您可以将其与textarea的blur事件的处理程序结合使用，以防止用户单击轮询之间的按钮。只要它具有焦点，以下内容将仅对textarea进行轮询：

var textarea = document.getElementById("your_textarea");
textarea.onfocus = function() {
    var initialValue = textarea.value;

    function testForChange() {
        if (textarea.value != initialValue) {
            // Do the button hiding stuff
        }
    }

    textarea.onblur = function() {
        window.clearInterval(timer);
        testForChange();
        textarea.onblur = null;
    };

    var timer = window.setInterval(function() {
        testForChange();
    }, 50);
};

Answer 2

一旦焦点移出textarea，就会发生onchange事件。这应该适用于您的目的，因为用户无法在不将焦点移出textarea的情况下单击按钮。

如果您必须更快地检测到更改，并且适用于直接输入和复制/粘贴，我能想到的唯一方法是使用定期检查文本是否已更改的计时器。

Answer 3

以下是onkeyup

的小例子

<html>
<head></head>
<body>
    <textarea id="txt"></textarea><span id="res"></span>
    <script>
        document.getElementById('txt').onkeyup = function(e){
            var res = 'unchanged';
            if(this.oldValue !== this.value){
                this.oldValue = this.value;
                res = 'changed';
            }
            document.getElementById('res').innerHTML = res;     
        };
    </script>
</body>
</html>

Answer 4

如果你可以使用jQuery我会这样做。

$('#MyElementname').change(function(){ alert('Changed!') })

或

$('#MyElementname').change(function(){ 
  if ( $(this).val() == "" )
    //do something
  else
    //do something else
 })

或

$('#MyElementname').keypress(function(){ 
  if ( $(this).val() == "" )
    //do something
  else
    //do something else
 })

重要的：

将所有上述内容包裹起来;

$(document).ready(function() {
  //above code in here
});

针对textarea的Javascript OnChange检测

4 个答案: