將最后一個字符輸入替換為內容可編輯div（嘗試所有選項）

Question

我有一個由內容可編輯div定義的消息框。 用戶可以在輸入后編輯他們的消息，並且我有一個字符倒計時，但是當我剩下0個字符時，我一生都找不到合適的方法來刪除最后一個字符或禁止最后一次按鍵

當前方法只是將光標發送回消息的開頭，並且不會刪除該字符。 iv嘗試了Internet上幾乎所有的建議，從連接到正則表達式再到子字符串。 我發現他們都沒有工作。

我在下面向您顯示的代碼是我自己的代碼，並且有相同的問題，在0時，光標只是返回到消息的開頭，然后再次允許更多的字符，而沒有限制允許的字符數...

任何人都可以在這里幫助我，並提出實現此簡單目標的方法。 我會非常豐滿。

這是我的代碼。

$(function () {

    $(ebm).keydown(checklimitsBuyer);
    });

    function checklimitsBuyer(){

        var username = $(ebm).html();
        var nameReg = /^.{0,100}$/;


        var messlength = username.length;
        var amount=100;

            var leftlength=amount-messlength;
            var ebmname=document.getElementById('Bname'+varmessageid+'');


                if (messlength < amount) {
                $(ebmname).text('Chars Left'+leftlength);
                                }




                    if(!nameReg.test(username)) {
                    $(ebm).css('border', '1px dashed red');
                    //alert('Only 300 Characters Allowed');
                        var newStr = username.replace(/.$/,".")
                        $(ebm).text(newStr);
                    }  

                                if(nameReg.test(username)) {
                                $(ebm).css('border', '1px dashed #07f310');


                                } 
                            }

Answer 1

如果要限制用戶可以輸入的字符數，可以嘗試如下操作：

 $(window).ready(()=>{ // our max number of characters let max = 10; // set the text of the div that allows the user to // keep track of how many characters he can still input $('#char-count').text(`remaining characters: ${max}`); $('#message').on('keypress input paste', function(e){ // the number of characters in our content editable div let charCount = $(this).text().length; if(charCount >= max){ // prevent the user from typing e.preventDefault(); } $('#char-count').text(`remaining characters: ${max - charCount}`); }); }); 

 #message { border: 1px dashed green; height: 100px; } #char-count { : margin-top: 10px; } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <div id="message" contenteditable="true"></div> <div id="char-count"></div> 

另外，這是一個工作示例 ：)

---

編輯

• 增加了對在達到限制時防止復制和粘貼的支持。

Answer 2

謝謝v.much

var ebm=document.getElementById('editBuyer'+varmessageid+'');



     $(ebm).on('keypress', function(e){

    var username = $(ebm).html();
    var nameReg = /^.{0,300}$/;

    if(!nameReg.test(username)) {
    $(ebm).css('border', '1px dashed red');
    e.preventDefault();

alert('Only 300 Characters Allowed');
                                }  

    if(nameReg.test(username)) {
    $(ebm).css('border', '1px dashed #07f310');
    } 
});