Javascript OnChange检测文本区域

我有一个textarea，一个按钮和一些下拉列表。用户通过ddls并回答一些问题，并根据下拉列表在textarea中生成文本。Javascript OnChange检测文本区域

在提问中的某个点，该按钮变得可见，以便提交;我实际上并没有提交onclick页面，我正在做其他客户端的东西。

问题的要点是：如果用户试图编辑textarea，我希望按钮消失（display：none;）;直接或通过粘贴/上下文菜单。如果用户编辑了textarea，但这个按钮不再与应用程序相关，那就好了。如何检测textarea是否正在更改。

编辑：我不能使用jQuery。

2010-09-20 bill

-2

如果你可以使用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 
});

来源

2010-09-20 05:44:29 griegs

我可以在逻辑上跟随是如何工作的，因此它可能会有所帮助，但不幸的是我不能使用jQuery。我将研究textarea的按键事件和onchange事件。我应该指定，但是，无论如何。 – bill 2010-09-20 06:37:20

已经有一个onchange事件触发一次焦点移出文本区域的。这应该适用于您的目的，因为用户无法在没有将焦点移出textarea的情况下单击该按钮。

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

来源

2010-09-20 05:47:42 casablanca

这里是一个小例子与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>

来源

2010-09-20 07:33:28 Mic

粘贴，拖放？ – 2010-09-20 08:43:27

该死！我在另一个问题上回答了这个问题。你是对的。 – Mic 2010-09-20 13:02:04

的change事件是完全可靠的，但只有当文本区域失去焦点，这意味着只要用户尝试点击按钮，它就会消失火灾。因此，这具有期望的结果，但用户体验差。

另一种方法是监视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); 
};

来源

2010-09-20 09:00:25

我隐藏按钮后如何关闭投票？ – bill 2010-09-20 09:10:06

'window.clearInterval（timer）;'in'testForChange'，虽然也许你想让按钮重新出现，如果用户撤消他们所做的更改？ – 2010-09-20 10:37:25

Javascript OnChange检测文本区域

回答

相关问题