コンテンツ編集可能な要素にmaxlengthを設定する

Question

keydownイベントを使用して、contenteditable属性がtrueに設定されたdivのユーザー入力テキストの文字列長を制限しようとしました。コンテンツがすでにハイライトの全部またはコンテンツの一部を遮断するために、マウスを使用して、最大の長さと、ユーザーに到達し、その後強調表示されたテキストは、期待してます入力を開始するとき

if ($(this).html().length < maxlength) 
    return true; 

しかし、それが失敗した1つのシナリオがあるが...それはあります入力されたものに置き換えてください。

私はjsのコードは、私は、このシナリオの長さがmaxlength属性を持つinputタグと罰金であることを確認し、そのキーの押下

をブロックしないように検出を改善したいです。 ここに私のjsfiddle：https://jsfiddle.net/Va1iant/0jy8sqjd/

Answer 1

私は、テキストの長さを考慮してこれを強調表示しました。私はこれが可能であることを知っています。だから、この代わりにこれを行うという修正があります。

if ($(this).html().length - window.getSelection().toString().length < maxlength) 
    return true; 

Answer 2

この質問はかなり面白いですが、答えは理解できますが、判読不能です。私は機能的なプログラムとしてあなたのコードをリファクタリングし、同様に動作します。

$('#mydiv').on('keydown', function (e) { 
 
    return isCtkKey(e.keyCode) || 
 
     (isAlphaNumKey(e.keyCode) && isSelected()) || 
 
     (isAlphaNumKey(e.keyCode) && isLessThanLen($(this), 4)); 
 
    
 
    function isSelected() { 
 
    \t return window.getSelection().toString().length > 0; 
 
    } 
 

 
    function isCtkKey(keyCode) { 
 
    return e.keyCode == 8 || e.keyCode == 46 
 
      || e.keyCode == 37 || e.keyCode == 39; 
 
    } 
 

 
    function isAlphaNumKey(keyCode) { 
 
    return (e.keyCode >= 48 && e.keyCode <= 57) || 
 
      (e.keyCode >= 65 && e.keyCode <= 90); 
 
    } 
 

 
    function isLessThanLen(ele, len) { 
 
    return ele.html().length < len; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="mydiv" contenteditable="true">test</div> 
 
<input type="text" maxlength="4" value="test">