заменить последний ввод символов в редактируемом содержимом div (перепробовал все варианты) - PullRequest
Новая
       9

заменить последний ввод символов в редактируемом содержимом div (перепробовал все варианты)

0 голосов
/ 15 ноября 2018

У меня есть окно сообщения, определяемое редактируемым содержимым 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');


                                } 
                            }

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Спасибо 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');
    } 
});
0 голосов
/ 15 ноября 2018

Если вы хотите ограничить количество символов, которое может ввести пользователь, вы можете попробовать что-то вроде этого: 

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

Также приведен рабочий пример :)

Редактировать

  • Добавлена ​​поддержка предотвращения копирования и вставки при достижении лимита.
...