将最后一个字符输入替换为内容可编辑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');
    } 
});