以下に示す contenteditable 範囲を 5 文字 (4 つの数字とダッシュ) に制限しようとしています。ユーザーは、紀元前 -9999 年から現在の 2013 年までの年を入力できる必要があります。年の前のダッシュは、紀元前の年を示します。ダッシュのないものは西暦年になります。
これらはすべて許容されるエントリです。
-9546
-765
-1
0
25
125
2013
<div class="HYPE_element" id="start_year" style="pointer-events: auto; top: 0px; left: 120px; position: absolute; padding: 8px; overflow: visible; word-wrap: break-word; display: inline; z-index: 5; font-size: 16px; color: rgb(120, 204, 187);">
<span contenteditable="true" class="numeric">2013</span>
</div>
現在、誰でも文字と数字を追加できます。また、スパンは右に拡大し続けます。
これを使用して、文字の長さを 5 に制限しました。
var content_id = 'start_year';
max = 4;
//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); });
$('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); });
function check_charcount(content_id, max, e)
{
if(e.which != 8 && $('#'+content_id).text().length > max)
{
// $('#'+content_id).text($('#'+content_id).text().substring(0, max));
e.preventDefault();
}
}
ただし、入力する文字を数字とダッシュだけに制限する方法がわかりません。