Question

如何使用javascript检测textarea上的更改事件？
我正在尝试检测您输入的剩余字符数。

我尝试使用onchange事件，但这似乎只在焦点出现时启动。

Answer 1

2012年，后PC时代就在这里，我们仍然需要与基本的东西斗争。这应该是非常简单。

在梦想实现之前，这是最好的方法，跨浏览器：使用input和onpropertychange事件的组合，如这样：

var area = container.querySelector('textarea');
if (area.addEventListener) {
  area.addEventListener('input', function() {
    // event handling code for sane browsers
  }, false);
} else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    // IE-specific event handling code
  });
}

input事件负责IE9+, FF, Chrome, Opera and Safari，onpropertychange处理IE8（它也适用于IE6和7，但有一些错误）。

使用input和onpropertychange的好处是它们不会不必要地触发（例如按下Ctrl或Shift键时）;所以如果您希望在textarea内容发生变化时运行相对昂贵的操作，这就是了解的方法。

现在，IE一如既往地做了一个支持这个工作的半工作：当字符从删除时，IE中的input和onpropertychange都不会触发。因此，如果您需要处理IE中的字符删除，请使用keypress（而不是使用keyup / keydown，因为即使用户按下并按住某个键，它们也只会触发一次）。

来源：http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

编辑：似乎上述解决方案并不完美，正如评论中正确指出的那样：textarea上addEventListener属性的存在不暗示你正在使用一个理智的浏览器;类似地，attachEvent属性的存在不暗示IE。如果您希望您的代码真的不透气，那么您应该考虑改变它。有关指示，请参阅Tim Down's comment。

Answer 2

为此，您需要使用onkeyup 和 onchange。 onchange将阻止上下文菜单粘贴，并且每次按键都会触发onkeyup。

有关代码示例，请参阅我在How to impose maxlength on textArea上的回答。

Answer 3

对于Google-Chrome，oninput就足够了（在Windows 7上测试版本为22.0.1229.94 m）。
对于IE 9，oninput将捕获除了通过contextmenu和backspace切割之外的所有内容。
对于IE 8，除了oninput之外，还需要onpropertychange来捕获粘贴。
对于IE 9 + 8，需要使用onkeyup来捕获退格。
对于IE 9 + 8，onmousemove是我发现通过contextmenu进行切割的唯一方法

未在Firefox上测试过。

    var isIE = /*@cc_on!@*/false; // Note: This line breaks closure compiler...

    function SuperDuperFunction() {
        // DoSomething
    }


    function SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally() {
        if(isIE) // For Chrome, oninput works as expected
            SuperDuperFunction();
    }

<textarea id="taSource"
          class="taSplitted"
          rows="4"
          cols="50"
          oninput="SuperDuperFunction();"
          onpropertychange="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onmousemove="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onkeyup="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();">
Test
</textarea>

Answer 4

我知道这不是你的问题，但我认为这可能有用。对于某些应用程序，每次按下一个键时都不会触发更改功能。这可以通过以下方式实现：

var text = document.createElement('textarea');
text.rows = 10;
text.cols = 40;
document.body.appendChild(text);

text.onkeyup = function(){
var callcount = 0;
    var action = function(){
        alert('changed');
    }
    var delayAction = function(action, time){
        var expectcallcount = callcount;
        var delay = function(){
            if(callcount == expectcallcount){
                action();
            }
        }
        setTimeout(delay, time);
    }
    return function(eventtrigger){
        ++callcount;
        delayAction(action, 1200);
    }
}();

这可以通过测试更近期的事件是否在某个延迟期内被解雇来发挥作用。祝你好运！

Answer 5

我知道这个问题是针对JavaScript的，但是，当textarea在所有当前浏览器中发生变化时，总是没有好的，干净的方法来检测。我知道jquery已经为我们照顾了它。它甚至可以处理文本区域的上下文菜单更改。无论输入类型如何，都使用相同的语法。

    $('div.lawyerList').on('change','textarea',function(){
      // Change occurred so count chars...
    });

或

    $('textarea').on('change',function(){
      // Change occurred so count chars...
    });

Answer 6

您可以在更改textarea时收听活动，并根据需要进行更改。这是一个例子。

(() => {
	const textArea = document.getElementById('my_text_area');
  textArea.addEventListener('input', () => {
    let textLn =  textArea.value.length;
    if(textLn >= 100) {
      textArea.style.fontSize = '10pt';
    }

  })
})()

<html>
<textarea id='my_text_area' rows="4" cols="50" style="font-size:40pt">
This text will change font after 100.
</textarea>
</html>

Answer 7

如果与HTML5输入验证/模式属性配对，

Keyup应该足够了。因此，创建一个模式（正则表达式）来验证输入并对.checkValidity（）状态进行操作。像下面这样的东西可以工作。在你的情况下，你会希望正则表达式匹配长度。我的解决方案正在使用/可在线演示here。

<input type="text" pattern="[a-zA-Z]+" id="my-input">

var myInput = document.getElementById = "my-input";

myInput.addEventListener("keyup", function(){
  if(!this.checkValidity() || !this.value){
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

Answer 8

代码我用于没有jquery的IE 11，只用于单个textarea：

使用Javascript：

// Impede que o comentário tenha mais de num_max caracteres
var internalChange= 0; // important, prevent reenter
function limit_char(max)
{ 
    if (internalChange == 1)
    {
        internalChange= 0;
        return;
    }
    internalChange= 1;
    // <form> and <textarea> are the ID's of your form and textarea objects
    <form>.<textarea>.value= <form>.<textarea>.value.substring(0,max);
}

和html：

<TEXTAREA onpropertychange='limit_char(5)' ...

Answer 9

试试这个。它很简单，因为它是2016年，我相信它适用于大多数浏览器。

<textarea id="text" cols="50" rows="5" onkeyup="check()" maxlength="15"></textarea> 
<div><span id="spn"></span> characters left</div>

function check(){
    var string = document.getElementById("url").value
    var left = 15 - string.length;
    document.getElementById("spn").innerHTML = left;
}

Answer 10

您可以做的最好的事情是设置一个在给定时间内调用的函数，并使用此函数检查textarea的内容。

self.setInterval('checkTextAreaValue()', 50);

Textarea onchange检测

10 个答案: