变化检测中的纹理区域

如何使用 javascript 检测 textarea 上的更改事件？
我正在尝试检测在您输入时还剩多少字符可用。

我尝试使用 onchange 事件，但似乎只有在焦点不在时才会生效。

273369 次浏览
小开
最佳答案

您将需要为此使用 onkeyup 还有 onchange。Onchange 将防止上下文菜单粘贴，onkeyup 将为每次击键触发。

有关代码示例，请参见我在 如何在 textArea 上使用 maxlength上的答案。

小开

您所能做的最好的事情就是设置一个函数，在给定的时间内调用该函数来检查文本区域的内容。

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

我知道这不是你的问题，但我觉得这可能有用。 对于某些应用程序来说，不是每次按下一个键时都触发 change 函数是一件很好的事情。这可以通过以下方法实现:

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);
}
}();

这是通过测试一个最近的事件是否在一定的延迟期内触发来实现的。祝你好运！

小开
  • 对于 Google-Chrome，oninput 就足够了(在 Windows 722.0.1229.94 m 版本上进行测试)。
  • 对于 IE9，oninput 将捕捉除了通过上下文菜单和后退空间切割之外的所有内容。
  • 对于 IE8，除了 oninput 之外，还需要 onproperty 修改来捕捉粘贴。
  • 对于 IE9 + 8，onkeyup 需要捕捉回退空间。
  • 对于 IE9 + 8，onmousemove 是我发现的唯一通过上下文菜单捕捉切割的方法

没有在 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>
小开

最好的方法是，跨浏览器: 结合使用以下两种方法: 一种是使用事件类型，另一种是使用事件类型，像这样:

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 和 Safari，而 onpropertychange负责 IE8(它也可以与 IE6和7一起工作，但是有一些 bug)。

使用 input和 onpropertychange的优点是它们不会不必要地触发(比如当按下 Ctrl或 Shift键时) ; 所以是 如果您希望在 textarea 内容发生变化时运行一个相对昂贵的操作，这就是解决方法。

现在 IE 一如既往地半吊子地支持这一点: 当字符是来自文本区的 删除时，不管是 input还是 onpropertychange都不会在 IE 中触发。因此，如果您需要在 IE 中处理字符删除，请使用 keypress(而不是使用 keyup/keydown，因为它们只触发一次，即使用户按下并按住一个键)。

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

编辑: 看起来即使上面的解决方案也不是完美的，正如在评论中正确指出的那样: 文本区域中 addEventListener属性的存在意味着你使用的是一个理智的浏览器; 同样地，attachEvent属性的存在意味着 IE。如果您希望您的代码真正无懈可击，那么您应该考虑更改它。有关指针，请参见 Tim Down 的评论。

小开

我知道这个问题是特定于 JavaScript 的，然而，似乎没有好的，干净的方法来总是检测当一个文本区域在所有当前浏览器中的变化。我得知 Jquery 已经帮我们搞定了。它甚至可以处理文本区域的上下文菜单更改。无论输入类型如何，都使用相同的语法。

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

或者

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

我在 IE11中使用的代码没有使用 jquery，仅仅是一个文本区域:

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)' ...
小开

如果与 HTML5输入验证/模式属性配对，键盘应该足够了。因此，创建一个模式(regex)来验证输入并根据。CheckValidy()状态。像下面这样的东西可能行得通。在您的情况下，您需要一个匹配长度的正则表达式。我的解决方案是在使用/可演示的在线 给你。

<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;
}
});
小开

试试这个，它很简单，而且因为它是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;
}
小开

您可以收听事件的变化，文本区和做的变化，根据你想要的。这里有一个例子。

const textArea = document.getElementById('my_text_area');
textArea.addEventListener('input', () => {
var 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>


提交答案