Omezení počtu znaků v prvku div

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.