Používám contenteditable div prvků v mé webové aplikaci a snažím se přijít s řešením, jak omezit počet znaků povolených v oblasti, a jakmile je limit dosažen, pokus o zadání znaků prostě nic nedělá.
Zatím mám toto:
var content_id = 'editable_div'; // Binding keyup/down events on the contenteditable div $('#' + content_id).keyup(function(){ check_charcount(content_id, max); }); $('#' + content_id).keydown(function(){ check_charcount(content_id, max); }); function check_charcount(content_id, max) { if($('#' + content_id).text().length > max) { $('#' + content_id).text($('#' + content_id).text().substring(0, max)); } }
Toto dělá omezte počet znaků na počet určený „max“, avšak jakmile je text oblasti nastaven funkcí jQuery .text(), kurzor se sám přestaví na začátek oblasti.
Pokud tedy uživatel bude pokračovat v psaní, nově zadané znaky budou vloženy na začátek textu a poslední znak textu bude odstraněn. Takže opravdu potřebuji nějaký způsob, jak udržet kurzor na konci textu upravitelné oblasti.
Odpověď
Předejte event
objekt vaší funkce a volání e.preventDefault()
pokud je dosaženo maxima:
var content_id = 'editable_div'; max = 10; //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(); } }
Možná budete muset udělat trochu víc, abyste uživateli umožnili dělat věci, jako je „smazat“.
Také byste se pravděpodobně mohli zbavit keyup
psovod. keydown
by mělo stačit.