在contenteditable元素中設置maxlength

我嘗試使用keydown事件來限制div中的用戶輸入文本的字符串長度，其中contenteditable屬性設置爲true，並且它可以工作。在contenteditable元素中設置maxlength

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

但是有它失敗一個場景..這是當使用內容鼠標阻止亮點全部或部分內容的某些部分已經達到最大長度和用戶，後來開始與期望輸入，高亮被任何鍵入的內容替換。

我想提高檢測這樣的js代碼不會阻止按鍵

我檢查了這個場景是罰款與maxlength屬性輸入標籤。這裏我的jsfiddle：https://jsfiddle.net/Va1iant/0jy8sqjd/

來源

2016-12-08 Va1iant

我得到這個工作，考慮到用戶已突出顯示的文本的長度。我只知道這是可能的。所以修復是這樣做，而不是

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

來源

2016-12-08 01:50:06 Va1iant

這個問題是相當有趣的，答案是有道理的，但它是不可讀的。我將你的代碼重構爲一個功能程序，它也可以工作。

$('#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">

來源

2016-12-08 02:43:08 Anson

在contenteditable元素中設置maxlength

回答

相關問題