javascript - 为什么 ContentEditable 在 Firefox 中很糟糕

Question

我在按键上使用带有 contenteditable 的 div，我在焦点后使用 15 个字符进行编辑，它无法编辑，下面是代码。代码:

<div id="test" contenteditable="{{isContentEditable}}"  onkeypress="return (this.innerHTML.length <= 15)"
                    ng-blur="handleEditableBlur();" ng-keydown="handleKeydown($event)" > {{value}}                    
                   </div>
                    <span id="pencilIcon" class="fa fa-pencil" data-ng-click="handleEdit();"  focus="test"></span>

这里单击后，铅笔图标内容可编辑在 15 个字符后不可编辑，我可以更新内容，它在 chrome 中工作正常，但在 firfox 中不起作用

Answer 1

我添加了一些在键盘中使用的击键来绕过逻辑，例如 tab backspace del 等返回 false，然后计算您输入的字符数。

请在您的 div 中使用 onkeypress="return checkEntry(event)" 来检查您的需求，并将以下 js 函数添加到您的 JS 中。

function checkEntry(e){
  e = e || window.event;
  var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
  var keyShorts = $.inArray(keyCode,new Array(8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,123,144,145))>-1;
  if(keyShorts){
    return true;
  }else if(e.target.innerHTML.replace(/(<|&lt;)br\s*\/*(>|&gt;)|(&nbsp;)/igm,' ').length>=15){
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="width:300px;height:300px;border:1px solid #ccc;" contenteditable=true onkeypress="return checkEntry(event)"></div>

希望对你有帮助干杯。