em
大きな問題が 1 つあります。しばらくしてからタグを追加したいのですが、これkeyup
は jQuery のイベントで発生します。したがって、em
タグを追加し、その中に残りのテキストまたは文字を追加します。これは私のコードです:
$(this).text.innerHtml("<em></em>").append($(this).text);
このコードは、はみ出した文字を赤くします。これはdiv内のタグをtext()
無視するため、使用します。em
$(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 の誰かです:カーソル位置を contentEditable <div> に設定します。
.html()
代わりにオフにしinnerHTML
てから追加してみてください。