段落标记中设置的最大限制，内容可编辑为 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) {&nbsp; var tval = $('#' + id).html(),&nbsp; &nbsp; tlength = tval.length,&nbsp; &nbsp; set = 10,&nbsp; &nbsp; remain = parseInt(set - tlength);&nbsp; if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {&nbsp; &nbsp; e.preventDefault();&nbsp; }}body {&nbsp; 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) {&nbsp; var tval = $('#' + id).html(),&nbsp; &nbsp; tlength = tval.length,&nbsp; &nbsp; set = 10,&nbsp; &nbsp; remain = parseInt(set - tlength);&nbsp; if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {&nbsp; &nbsp; $('#' + id).html((tval).substring(0, set + 1));&nbsp; &nbsp; e.preventDefault();&nbsp; }}<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>解释您使用的是 .val 而不是 .html。当您将字符串插入回去时，光标重置为字符串的开头，并添加新的字符，并修剪字符串末尾的字符。为了解决这个问题，我添加了 e.preventDefault 以阻止添加字符。