将最后输入的字符替换为内容可编辑 div（尝试了所有选项）

Question

我有一个由内容可编辑定义的消息框 div。用户可以在输入后编辑他们的消息，并且我有一个字符倒计时，但是当我剩下 0 个字符时，我无法终生找到合适的方法来删除最后一个字符或禁止最终按键

当前方法只是将光标发送回消息的开头，并不删除该字符。我尝试了互联网上几乎所有的建议，从拼接到正则表达式再到子字符串。我发现其中 none 个可以工作。

我在下面向您展示的代码是我自己的代码并且存在同样的问题，在 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>

此外，这里有一个 working example :)

编辑

添加了对在达到限制时阻止复制和粘贴的支持。

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

将最后输入的字符替换为内容可编辑 div（尝试了所有选项）

replace last character input into content editable div (tried all options)

html

keydown

jscript

编辑