以编程方式更改文本大小是阻止更改事件

Question

我们有一个文本框,用户应该输入一些数据.但是,该数据不得超过500个字符.为了完成我们已经实现了在KeyUp事件上调用的以下函数:

        function keyupMaxLimit(obj, maxlen) {
            if (parseInt(obj.value.length) > maxlen) {
                $(obj).val($(obj).val().substr(0,maxlen));
            }
        }

这是有效的:用户无法输入更多的内容.我们还有一个与同一文本框的Change事件相关联的函数,以便检测更改并完成我们的魔法.

    $(document).on("change", "#myTextBox", function () {
        //magic here
    });

这也有效:当用户更改文本时,正在调用该函数.

但是,这是我们的问题,这两个功能并没有合作.例如,如果用户引入了他/她应该使用的更多字符,则第一个函数将修剪文本,但第二个函数将不会被调用!

我们对第一个函数上的文本框所做的更改似乎是阻止/清除Change事件.它是否正确？任何解决方法？我无法在第一个函数上显式触发Change事件,因为我们会创建不必要的更改.

编辑 - 你可以在这里看到这种情况:http://jsfiddle.net/jpaires/dpujx/ 打开浏览器的控制台并在文本框上写"12345".该事件将被触发(控制台上的"a-ok").但是,如果您编写"123456",文本将被剪切并且不会触发事件(控制台上没有"a-ok").谢谢Juhana :)

Answer 1

我应该尝试限制 html 输入中的字符数，如下所示：

<input type="text" id="Textbox" name="Textbox" maxlength="500" />

另一件事是，如果您想在文本输入更改时执行某些操作，我认为在这种情况下您也可以在输入上使用 keyup 事件，如下所示：

$(document).on("keyup", "#myTextBox", function () {
 //SOMETHING
});

我用我的建议更新了这个小提琴，它有效...... http://jsfiddle.net/BdqDB/

通过这种方式，您始终会触发日志并且文本受到限制。

另一个解决方案是：如果您想继续使用函数来剪切文本，我会这样做：

$(document).on("keyup", "#myTextBox", function () {
  keyupMaxLimit(this,5);
  console.log('other stuff');
});

请参阅http://jsfiddle.net/wTQa4/1/上的工作

如果你查看jquery的change文档，你会发现：“当元素的值发生变化时，change事件被发送到元素。此事件仅限于元素、框和元素。对于选择框、复选框和单选按钮，该事件会立即触发当用户使用鼠标进行选择时，但对于其他元素类型，事件将被推迟，直到元素失去焦点。 ”

所以我认为这个问题的答案是，你不会通过更改事件得到你想要的东西，我给了你问题的解决方案，但你没有发送反馈......你不应该做的其他事情是内联调用 js 方法，一旦使用 jQuery，将事件绑定到元素就非常容易，而且它是不引人注目的 javascript，是编写 js 的最佳实践。