时间戳

首页 > 解决方案 > 在按钮单击事件上添加数据时如何限制 textarea maxlength？

javascript - 在按钮单击事件上添加数据时如何限制 textarea maxlength？

问题描述

我正在执行以下步骤： 1- 一个最大长度为 50 的 textarea。 2- 单击一个按钮，将其文本附加到 textarea。

问题：如果继续单击按钮，Maxlength 验证不起作用。不想在按钮单击时检查 maxlength。

是否可以添加任何 textArea 事件侦听器来检查是否在按钮单击事件上添加数据。

<body>
    <textarea id="test" rows="4" cols="50" maxlength="50">
    </textarea>

    <button onclick="appendData()"> Click </button>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(event) { 
            var txtArea = document.querySelector('textarea');
        });

        document.getElementById('test').addEventListener('change', function(event) {
            alert('inside event listener of textarea 2')
        })

        function appendData(){
            document.querySelector('textarea').value += "hello";
        }

    </script>

</body>

标签： javascripthtml

解决方案

您不想在 onclick javascript 中检查/执行此操作的任何具体原因？我认为没有这样的 TextArea eventListener 可用于完成此操作。无法使用其他键盘（onKeyUp、onKeyDown 或 onKeyPress 事件）事件，因为该值直接设置到输入元素中（我相信客户端将在键盘上按下一个键时使用它来实现 maxLength 功能）。

这可以在在 textarea 中设置新值之前通过 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>

JSFiddle

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

推荐阅读