Skip to main content
He corregido ese problema en concreto pero auditar el campo caracter a caracter siempre tendrá inconvenientes si el usuario realiza modificaciones en e interior de la cadena. Yo desestimaría por completo esta opción y dejaría solo la validación final del campo con el evento blur.l
Origen Enlace
// Javascript
function maxlength() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:heart:$/igi) || []).length*('[:heart:'.length-1)
        - (txt.match(/\[:heart$heart/igi) || []).length*('[:heart'.length-1)
        - (txt.match(/\[:hear$hear/igi) || []).length*('[:hear'.length-1)
        - (txt.match(/\[:hea$hea/igi) || []).length*('[:hea'.length-1)
        - (txt.match(/\[:he$he/igi) || []).length*('[:he'.length-1)
        - (txt.match(/\[:h$h/igi) || []).length*('[:h'.length-1)
        - (txt.match(/\[:$/igi) || []).length*('[:'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)
        - (txt.match(/\[:foo:$/igi) || []).length*('[:foo:'.length-1)
        - (txt.match(/\[:foo$foo/igi) || []).length*('[:foo'.length-1)
        - (txt.match(/\[:fo$fo/igi) || []).length*('[:fo'.length-1)
        - (txt.match(/\[:f$f/igi) || []).length*('[:f'.length-1)>10length>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onkeyup = maxlength;
function recortar() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onblur = recortar;
// JQuery
$('#input2').on('keyup', function () {
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:heart:$/igi) || []).length*('[:heart:'.length-1)
        - (txt.match(/\[:heart$heart/igi) || []).length*('[:heart'.length-1)
        - (txt.match(/\[:hear$hear/igi) || []).length*('[:hear'.length-1)
        - (txt.match(/\[:hea$hea/igi) || []).length*('[:hea'.length-1)
        - (txt.match(/\[:he$he/igi) || []).length*('[:he'.length-1)
        - (txt.match(/\[:h$h/igi) || []).length*('[:h'.length-1)
        - (txt.match(/\[:$/igi) || []).length*('[:'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)
        - (txt.match(/\[:foo:$/igi) || []).length*('[:foo:'.length-1)
        - (txt.match(/\[:foo$foo/igi) || []).length*('[:foo'.length-1)
        - (txt.match(/\[:fo$fo/igi) || []).length*('[:fo'.length-1)
        - (txt.match(/\[:f$f/igi) || []).length*('[:f'.length-1)>10length>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
}).on('blur',function(){
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
});
<script         src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<input id="input1" type="text" style="width: 500px;">
<input id="input2" type="text" style="width: 500px;">
// Javascript
function maxlength() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:heart:$/i) || []).length*('[:heart:'.length-1)
        - (txt.match(/\[:heart$/i) || []).length*('[:heart'.length-1)
        - (txt.match(/\[:hear$/i) || []).length*('[:hear'.length-1)
        - (txt.match(/\[:hea$/i) || []).length*('[:hea'.length-1)
        - (txt.match(/\[:he$/i) || []).length*('[:he'.length-1)
        - (txt.match(/\[:h$/i) || []).length*('[:h'.length-1)
        - (txt.match(/\[:$/i) || []).length*('[:'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)
        - (txt.match(/\[:foo:$/i) || []).length*('[:foo:'.length-1)
        - (txt.match(/\[:foo$/i) || []).length*('[:foo'.length-1)
        - (txt.match(/\[:fo$/i) || []).length*('[:fo'.length-1)
        - (txt.match(/\[:f$/i) || []).length*('[:f'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onkeyup = maxlength;
function recortar() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onblur = recortar;
// JQuery
$('#input2').on('keyup', function () {
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:heart:$/i) || []).length*('[:heart:'.length-1)
        - (txt.match(/\[:heart$/i) || []).length*('[:heart'.length-1)
        - (txt.match(/\[:hear$/i) || []).length*('[:hear'.length-1)
        - (txt.match(/\[:hea$/i) || []).length*('[:hea'.length-1)
        - (txt.match(/\[:he$/i) || []).length*('[:he'.length-1)
        - (txt.match(/\[:h$/i) || []).length*('[:h'.length-1)
        - (txt.match(/\[:$/i) || []).length*('[:'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)
        - (txt.match(/\[:foo:$/i) || []).length*('[:foo:'.length-1)
        - (txt.match(/\[:foo$/i) || []).length*('[:foo'.length-1)
        - (txt.match(/\[:fo$/i) || []).length*('[:fo'.length-1)
        - (txt.match(/\[:f$/i) || []).length*('[:f'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
}).on('blur',function(){
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
});
<script         src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<input id="input1" type="text" style="width: 500px;">
<input id="input2" type="text" style="width: 500px;">
// Javascript
function maxlength() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length
        - (txt.match(/\[:heart:/gi) || []).length
        - (txt.match(/\[:heart/gi) || []).length
        - (txt.match(/\[:hear/gi) || []).length
        - (txt.match(/\[:hea/gi) || []).length
        - (txt.match(/\[:he/gi) || []).length
        - (txt.match(/\[:h/gi) || []).length
        - (txt.match(/\[:/gi) || []).length
        - (txt.match(/\[:foo:\]/gi) || []).length
        - (txt.match(/\[:foo:/gi) || []).length
        - (txt.match(/\[:foo/gi) || []).length
        - (txt.match(/\[:fo/gi) || []).length
        - (txt.match(/\[:f/gi) || []).length>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onkeyup = maxlength;
function recortar() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onblur = recortar;
// JQuery
$('#input2').on('keyup', function () {
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length
        - (txt.match(/\[:heart:/gi) || []).length
        - (txt.match(/\[:heart/gi) || []).length
        - (txt.match(/\[:hear/gi) || []).length
        - (txt.match(/\[:hea/gi) || []).length
        - (txt.match(/\[:he/gi) || []).length
        - (txt.match(/\[:h/gi) || []).length
        - (txt.match(/\[:/gi) || []).length
        - (txt.match(/\[:foo:\]/gi) || []).length
        - (txt.match(/\[:foo:/gi) || []).length
        - (txt.match(/\[:foo/gi) || []).length
        - (txt.match(/\[:fo/gi) || []).length
        - (txt.match(/\[:f/gi) || []).length>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
}).on('blur',function(){
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
});
<script         src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<input id="input1" type="text" style="width: 500px;">
<input id="input2" type="text" style="width: 500px;">
Origen Enlace

Prueba esto. No diferencia entre mayúsculas y minúsculas. Se puede copiar y pegar:

// Javascript
function maxlength() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:heart:$/i) || []).length*('[:heart:'.length-1)
        - (txt.match(/\[:heart$/i) || []).length*('[:heart'.length-1)
        - (txt.match(/\[:hear$/i) || []).length*('[:hear'.length-1)
        - (txt.match(/\[:hea$/i) || []).length*('[:hea'.length-1)
        - (txt.match(/\[:he$/i) || []).length*('[:he'.length-1)
        - (txt.match(/\[:h$/i) || []).length*('[:h'.length-1)
        - (txt.match(/\[:$/i) || []).length*('[:'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)
        - (txt.match(/\[:foo:$/i) || []).length*('[:foo:'.length-1)
        - (txt.match(/\[:foo$/i) || []).length*('[:foo'.length-1)
        - (txt.match(/\[:fo$/i) || []).length*('[:fo'.length-1)
        - (txt.match(/\[:f$/i) || []).length*('[:f'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onkeyup = maxlength;
function recortar() {
    var txtIni=document.getElementById("input1").value;
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        document.getElementById("input1").value=txt;
};
document.getElementById("input1").onblur = recortar;
// JQuery
$('#input2').on('keyup', function () {
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:heart:$/i) || []).length*('[:heart:'.length-1)
        - (txt.match(/\[:heart$/i) || []).length*('[:heart'.length-1)
        - (txt.match(/\[:hear$/i) || []).length*('[:hear'.length-1)
        - (txt.match(/\[:hea$/i) || []).length*('[:hea'.length-1)
        - (txt.match(/\[:he$/i) || []).length*('[:he'.length-1)
        - (txt.match(/\[:h$/i) || []).length*('[:h'.length-1)
        - (txt.match(/\[:$/i) || []).length*('[:'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)
        - (txt.match(/\[:foo:$/i) || []).length*('[:foo:'.length-1)
        - (txt.match(/\[:foo$/i) || []).length*('[:foo'.length-1)
        - (txt.match(/\[:fo$/i) || []).length*('[:fo'.length-1)
        - (txt.match(/\[:f$/i) || []).length*('[:f'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
}).on('blur',function(){
    var txtIni=$(this).val();
    var txt=txtIni;
    while(txt.length
        - (txt.match(/\[:heart:\]/gi) || []).length*('[:heart:]'.length-1)
        - (txt.match(/\[:foo:\]/gi) || []).length*('[:foo:]'.length-1)>10){
        txt=txt.slice(0, -1);
    }
    if(txt!==txtIni)
        $(this).val(txt);
});
<script         src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<input id="input1" type="text" style="width: 500px;">
<input id="input2" type="text" style="width: 500px;">

Saludos.