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

时间:2014-06-14 06:53:07

标签: javascript jquery html5 css3

目前我正在处理一个有跨字拼图的页面。因此,我处于停止在内容可编辑div中输入多个字符的情况。请注意,这是用于epub开发的。因此,我无法使用输入标签。请在这方面指导我。

我尝试在div中使用脚本。但是在我使用退格后,它不允许我输入任何字符。

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

因为,我已经有一天客户了。如果你解决了这个问题,那将会很棒。

提前致谢...

2 个答案:

答案 0 :(得分:1)

Demo Fiddle

使用回调按键。 (适用于退格键,删除)

$('div').on('keypress',function(){
     return ($(this).text().length<1)
});

此外,您可能需要处理复制粘贴

$('div').on('paste',function(e){
    e.preventDefault();
});

<强> Demo with paste handled

答案 1 :(得分: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删除的关键代码,3739是分别为左箭头右箭头的密钥代码。

Demo.

关于使用return false;取消活动的子记录,通常我们应该使用e.preventDefault(),因为return false;也意味着e.stopPropagation()被调用。