максимальное ограничение, установленное в теге абзаца с contentEditable true

Question

У меня есть тег абзаца, который можно редактировать, и я хочу установить для него максимальное ограничение. После максимального ограничения символ не должен быть типом. Я пытался, но не работает.

<p id="business_title" contentEditable="true" onkeypress="limitMessage(this.id,event);">hhhhh</p>

jquery:

function limitMessage(id,e){
        var tval = $('#'+id).val(),
            tlength = tval.length,
            set = 10,
            remain = parseInt(set - tlength);
        if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
            $('#'+id).val((tval).substring(0, tlength - 1))
        }
    }

Answer 1

Пожалуйста, попробуйте это.

function limitMessage(id, e) {
  var tval = $('#' + id).html(),
    tlength = tval.length,
    set = 10,
    remain = parseInt(set - tlength);
  if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
    $('#' + id).html((tval).substring(0, set + 1));
    e.preventDefault();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="business_title" contentEditable="true" onkeypress="limitMessage(this.id,event);">hhhhh</p>

Пояснение

1. Вы использовали .val вместо. html.
2. Когда вы вставляли строку назад, курсор возвращался к началу строки, добавлялся новый символ и обрезался символ конца строки. Чтобы решить эту проблему, я добавил e.preventDefault, чтобы остановить добавление символа.

Answer 2

Вы забыли jQuery CDN и используете p вместо input, тогда вам нужно использовать html() вместо val(), поскольку элемент p не ожидает значения.

И вам не нужно писать $(this).val((tval).substring(0, tlength - 1)), потому что он вернется к началу предложения, поэтому просто используйте preventDefault(), чтобы прекратить писать.

Попробуйте это:

function limitMessage(id, e) {
  var tval = $('#' + id).html(),
    tlength = tval.length,
    set = 10,
    remain = parseInt(set - tlength);
  if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
    e.preventDefault();
  }
}

body {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="business_title" contentEditable="true" onkeypress="limitMessage(this.id,event);">hello</p>