在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

您忘记了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>

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来阻止添加char