0
textareaではなく編集可能なdivでメッセージエディタを作成しようとしています。私は編集可能なdivの文字数に苦労しています。どのように正確な文字カウントを得ることができますか？編集可能なdiv内のテキストカウントと部分文字列
- 私は$（ "＃のeidtor"）を使用している場合。テキスト（）Iユーザーの$（ "＃のeidtor"）場合
- を入力しながら、それは新しい行をカウントされません。HTML（）、それ入力中にhtmlの内容を数えてくれます。
- 私はどのように処理できるのですか。貼り付けられたテキストの新しい行に
<div>...</div>を作成します。 テキストに基づいて部分文字列を作成すると、改行文字が削除されます。
私はクロスブラウザサポートソリューションを探していません。それはGoogle Chromeで動作するはずです。どんな助け、提案、ガイドも感謝します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var maxLen = 200;
$(document).ready(function() {
$("#eidtor").on("keydown", function (e) {handleKeydown(e);});
$("#eidtor").on("keyup", function (e) { handleKeyup(e); });
$("#eidtor").on("paste", function (e) { handlePaste(e); });
$("#charCount").html(maxLen);
});
function handleKeydown(e) {
var currentLen = $("#eidtor").text().length;
var keycode = e.keyCode;
var valid =
(keycode > 47 && keycode < 58) || // number keys
keycode == 32 || keycode == 13 || // spacebar & return key(s)
(keycode > 64 && keycode < 91) || // letter keys
(keycode > 95 && keycode < 112) || // numpad keys
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
(keycode > 218 && keycode < 223); // [\]' (in order)
if (valid && !e.ctrlKey) {
currentLen++;
if (currentLen > maxLen) {
e.preventDefault();
}
}
}
function handleKeyup(e) {
var currentLen = $("#eidtor").text().length;
$("#charCount").html(maxLen-currentLen);
}
function handlePaste(e) {
setTimeout(function (e) {
var currentLen = $("#eidtor").text().length;
if (currentLen > maxLen) {
var tempMessage = $("#eidtor").text().substring(0, maxLen);
$("#eidtor").empty();
$('#eidtor').html(tempMessage);
currentLen = maxLen;
}
$("#charCount").html(currentLen);
});
}
</script>
<style type="text/css" >
#eidtor {
background-color: #fff;
resize: none;
overflow: auto;
padding: 5px;
height: 10em;
width: 20em;
border-style: solid;
border-color: black;
display:inline-block;
}
</style>
</head>
<body>
<div id="container" style="margin-left:2em;">
<div id="eidtor" style=""
contenteditable="true"></div>
<br/>
Remaining Character(s) : <span id ="charCount"></span>
</div>
</body>
</html>
jQueryについてよく分かりませんが、ChromeのプレーンJavaScriptで '$ 0.innerText.length'を使用して改行を含む文字数を取得できます。 Chromeは編集可能なdivの末尾に余分に
を追加するので、値から1を引く必要があります。 –