时间戳

首页 > 解决方案 > 将最后一个字符输入替换为内容可编辑的 div（尝试了所有选项）

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

问题描述

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

当前方法只是将光标返回到消息的开头，而不删除字符。Iv 尝试了互联网上从拼接到正则表达式再到子字符串的几乎所有建议。我发现他们都没有工作。

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


                                } 
                            }

标签： htmlkeydownjscript

解决方案

如果你想限制用户可以输入的字符数，你可以尝试这样的事情：

$(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>

另外，这是一个工作示例:)

编辑

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

推荐阅读