我有一个大问题,我想em
在一段时间后添加标签,这发生keyup
在 jQuery 中的事件上。所以我想添加em
标签,并在其中附加其余的文本或字符。这是我的代码:
$(this).text.innerHtml("<em></em>").append($(this).text);
尝试使用.html()
而不是关闭innerHTML
然后附加。
此代码将使溢出的字符变为红色。我使用text()
,因为这忽略em
了 div 中的标签。
$(function () {
$('div').keyup(function () {
var $this = $(this),
text = $this.text(),
maxlength = 20;
if (text.length > maxlength) {
var first = text.substring(0, maxlength),
overflow = text.substring(maxlength, text.length);
// this.innerHTML = first + '<em>' + overflow + '</em>';
$this.text(first);
// Now all there's left to do is force the caret at the end,
// but that's pretty much code and would make this messy.
// I'm sure you can google this. There's a link in my answer.
}
});
});
有了这个 HTML
<div contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" id="342387257900146688">
Type here.
</div>
这是一个现场小提琴:http: //jsfiddle.net/BaN7D/1/
但是,如果超过最大长度,.html()
将强制光标在开头。有一些示例可以将光标放在 div 的末尾。这里有人在 SO 上提出了一个很好的答案:Set cursor position on contentEditable <div>