javascript - 在 contenteditable div 中不允许超过 1 个字符

Question

目前我正在处理一个有填字游戏的页面。因此，我处于停止在内容可编辑 div 中键入多个字符的情况。请注意，这是用于 epub 开发的。因此，我不能使用输入标签。请在这方面指导我。

我尝试在 div 本身中遵循脚本。但它不允许我在使用退格键后键入任何字符。

onkeypress="return (this.innerText.length >= 1 ? false : true )"

从那以后，我要在另一天拜访客户。如果您解决了这个问题，那就太好了。

提前致谢...

Answer 1

要允许其他控制键，您应该改为处理 onkeydown 事件，但请注意，在触发 onkeydown 时，键入的键尚未附加到文本域。因此，我们不会检查文本长度是否为 1，而是检查它是否为 0。

$('div').keydown(function(e){
   return $.inArray(e.which, [8, 46, 37, 39]) > -1 || $(this).text().length == 0;
});

8是Backspace键码，46是Delete键码，37 和 39 分别是 Left arrow 和 Right arrow 的键码。

Demo.

关于使用return false; 取消事件的子注释，通常我们应该使用e.preventDefault() 因为return false;也意味着 e.stopPropagation() 被调用。