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中无法正常工作

Answer 1

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

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

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

希望它有所帮助，欢呼声。

为什么ContentEditable在Firefox中很糟糕

1 个答案: