Javascript 在按钮单击事件中添加数据时如何限制textarea maxlength?

Javascript 在按钮单击事件中添加数据时如何限制textarea maxlength?,javascript,html,Javascript,Html,我正在执行以下步骤: 1-最大长度为50的文本区域。 2-单击按钮,文本将附加到文本区域 <html> <head> <script> function hello() { var ta = document.getElementById("test"), maxlength = ta.maxLength, value = ta.value, textToAppend = "hello";

我正在执行以下步骤: 1-最大长度为50的文本区域。 2-单击按钮,文本将附加到文本区域

<html>
<head>
<script>
function hello() {
     var ta = document.getElementById("test"),
         maxlength = ta.maxLength,
         value = ta.value,
         textToAppend = "hello";

     value += "hello";
     totalLen = value.length;
     if (totalLen>maxlength) {
         return false;
     }
     else {
         ta.value = value;
         return true;
     }
}
</script>
</head>
<body>
  <textarea id="test" rows="4" cols="50" maxlength="50">
  </textarea>
  <button onclick="hello();"> Click </button>
</body>
</html>
问题:如果继续单击按钮,Maxlength验证将不起作用。 不想在单击按钮时对maxlength进行任何检查

是否有任何textArea eventlistener我可以添加以检查是否在按钮单击事件上添加数据


点击
addEventListener(“DOMContentLoaded”,函数(事件){
var txtArea=document.querySelector('textarea');
});
document.getElementById('test')。addEventListener('change',函数(事件){
警报('textarea 2'的内部事件侦听器)
})
函数appendData(){
document.querySelector('textarea')。value+=“hello”;
}

您不想在onclick javascript中检查/执行此操作的具体原因是什么?我认为没有这样的TextArea eventListener可以用来实现这一点。其他键盘事件(onKeyUp、onKeyDown或onKeyPress事件)无法使用,因为该值直接设置到输入元素中(我相信客户端在键盘上按下一个键时会使用该元素来实现maxLength功能)

这可以在文本区域中设置新值之前,通过onclick javascript中的大小检查来完成

<html>
<head>
<script>
function hello() {
     var ta = document.getElementById("test"),
         maxlength = ta.maxLength,
         value = ta.value,
         textToAppend = "hello";

     value += "hello";
     totalLen = value.length;
     if (totalLen>maxlength) {
         return false;
     }
     else {
         ta.value = value;
         return true;
     }
}
</script>
</head>
<body>
  <textarea id="test" rows="4" cols="50" maxlength="50">
  </textarea>
  <button onclick="hello();"> Click </button>
</body>
</html>

函数hello(){
var ta=document.getElementById(“测试”),
maxlength=ta.maxlength,
value=ta.value,
textToAppend=“你好”;
值+=“你好”;
totalen=value.length;
如果(总长度>最大长度){
返回false;
}
否则{
ta.value=值;
返回true;
}
}
点击


如果maxLength检查仅在追加完整字符串后才失败,则此代码可以改进为仅追加子字符串。

在向其中追加文本之前,您可以获取该值。为什么不希望在按钮单击处理程序中添加检查?@user4520感谢您的响应。我无法在按钮的单击处理程序中添加签入,因为它是可重用组件的一部分,并且我无法向通用组件添加特定功能。textArea没有这样的事件吗?@mkamranhamid您的意思是说在按钮的点击处理程序中我可以得到textArea的值?你能详细说明一下吗?@walter你能添加你自己的点击处理程序而不是你不想更新的现有点击处理程序吗?提问者在评论中提到
“我不能在点击中添加签入”
@caramba是的,在发布我的答案后看到了这一点。谢谢