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

Question

i have a message box defined by a content editable div. The user can edit their message after input, and i have a character countdown , but when i get to 0 characters left, i cannot for the life of me find a suitable method to remove the last character or disallow the final keypress

The current method simply sends the cursor back to the start of the message and does not remove the character. Iv tried almost every suggestion on the internet from splice to regex to substring. i have found none of them to work.

The code i am showing you below is my own code and has the same problem, at 0 the cursor simply goes back to the start of the message and then allows many more characters again without limiting the amount of characters allowed...

Could anybody help me out here and suggest a method to achieve this simple goal. i would be very great-full.

Here is my code.

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

If you want to limit the number of characters the user can input, you can try something like this:

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

Also, here's a working example :)

---

Edit

• Added support for preventing copy and pasting when the limit is reached.

Answer 2

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