Answers:
您将需要使用onkeyup 和 onchange。onchange将阻止上下文菜单粘贴,并且onkeyup将为每次击键触发。
请参阅我的有关如何对textArea施加maxlength的答案以获取代码示例。
onkeyup是输入检测的可怕事件。使用oninput和onpropertychange(用于IE支持)。
onchange是不是在上下文菜单剪切/粘贴时被解雇。
现在是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和Safari,并onpropertychange处理IE8(它也适用于IE6和7,但存在一些错误)。
使用input和的优点onpropertychange是它们不会不必要地触发(如按Ctrl或Shift键时);因此,如果您希望在文本区域内容更改时执行相对昂贵的操作,则可以采用这种方法。
现在IE,一如既往,不支持这一个半称职的工作:既没有input,也不onpropertychange在IE火灾时,字符删除从文本区域。因此,如果您需要处理IE中字符的删除,请使用keypress(与使用keyup/ 相对keydown,因为即使用户按下并按住某个键,它们也只会触发一次)。
资料来源:http : //www.alistapart.com/articles/expanding-text-areas-made-elegant/
编辑:看来,即使上述方案并不完美,因为正确地在评论中指出:存在addEventListener于textarea的属性并没有暗示你与一个健全的浏览器工作; 类似地,存在attachEvent性并没有暗示IE。如果您希望代码确实是气密的,则应考虑更改它。有关指针,请参见Tim Down的评论。
oninput是我们应该这样做的方式,但是您可能不应该将其addEventListener用作浏览器支持的测试。+1。
keypress事件在IE9(以及可能更高版本)中处理这种情况。
未在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 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);
}
}();
这通过测试是否在某个延迟时间内触发了最近的事件而起作用。祝好运!
我知道这个问题是特定于JavaScript的,但是,似乎没有一种好的,干净的方法可以始终检测当前所有浏览器中的文本区域何时发生变化。我了解到jquery已经为我们解决了这个问题。它甚至可以处理对文本区域的上下文菜单更改。无论输入类型如何,都使用相同的语法。
$('div.lawyerList').on('change','textarea',function(){
// Change occurred so count chars...
});
要么
$('textarea').on('change',function(){
// Change occurred so count chars...
});
bind("input cut paste"...,它的工作原理很像-使用键盘或上下文菜单输入,剪切和粘贴;甚至拖放文本。
change为触发事件textarea。
您可以在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>
如果将Keyup与HTML5输入验证/样式属性配对,就足够了。因此,创建一个模式(regex)来验证输入并根据.checkValidity()状态采取行动。像下面这样的东西可以工作。在您的情况下,您需要一个正则表达式匹配长度。我的解决方案正在此处在线使用/可演示。
<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;
}
});
我用于IE 11且没有jquery且仅用于单个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)' ...
试试这个。这很简单,并且因为它是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;
}
最好的办法是设置一个要在给定时间内调用的函数,然后使用此函数检查文本区域的内容。
self.setInterval('checkTextAreaValue()', 50);