段落标记中设置的最大限制，内容可编辑为 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

您忘记了 jQuery CDN 并且正在使用p而不是input，那么您需要使用html()而不是val()因为该p元素不需要值。

而且你不需要写$(this).val((tval).substring(0, tlength - 1))，因为它会返回到句子的开头，所以只需使用 apreventDefault()来停止写。

尝试这个 ：

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>

Answer 2

请尝试这个。

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 以阻止添加字符。