3

Tengo un <input> donde debo aceptar un máximo de 10 caracteres, es decir, tener un maxlength de 10 caracteres, pero dentro de este debo ingresar Meta Caracteres (especie de código por ejemplo [:heart:]) que mi página interpreta como un icono de corazón, por ejemplo. También puedo ingresar texto y demás.

El problema:

Cuando coloco un código (o Meta Caracteres), por ejemplo [:heart:] ya el <input> me cuenta 9 caracteres! y solo puedo escribir uno más y ya.

Mi pregunta:

¿Cómo puedo hacer para que este código (o Meta Caracteres) me lo cuente como uno solo y así poder ingresar 9 caracteres más?

3
  • 1
    Tienes que quitar el maximo y gestionarlo tu en el evento onKeypress contando tu en javascript esos 10 caracteres (vas sumando 1 pero si la letra que encuentras es '[' seguido de ':' no cuentas hasta que encuentres ':' seguido de ']')
    – Zartch
    Commented el 16 may. 2017 a las 18:53
  • haz la validacion despues de interpolar/transformar el emoii como texto unicode. Lo estas haciendo antes. Commented el 16 may. 2017 a las 20:21
  • te deje un código que maneja metacharacters, Saludos!! ;))...
    – fwBasic
    Commented el 16 may. 2017 a las 23:12

2 respuestas 2

3

Aquí te dejo un código para manejar meta caracteres y que el largo del String no exceda los indicados en la función, puedes manejar varios meta caracteres colocandolos en la matriz meta[], tales como: black (spades ♠), red (hearts ♥), blue (diamonds ♦) y green (clubs ♣). .

Ejemplo:

function meta(event,maxlength) {
 var el  = event.target,

  // MetaCharacters: black (spades ♠), red (hearts ♥), blue (diamonds ♦)
  // and green (clubs ♣)
  meta = {0:{code:"[:spades:]"  , char:"♠"}, // Elementos++
          1:{code:"[:heart:]"   , char:"♥"},
          2:{code:"[:diamonds:]", char:"♦"},
          3:{code:"[:clubs:]"   , char:"♣"},
          length:4,       // Numero de Elementos
          maxlength:12},  // length del Elemento con máximo tamaño
  len = 0,
  warning = false,
  ss  = el.selectionStart,
  se  = el.selectionEnd,
  key = event.key;

 if(key.length != 1) {
  key = "";
  if(event.key == "Backspace") {
   ss = el.selectionStart - 1;
  } else if(event.key == "Delete") {
   se = se + 1;
  }
 }
 val = el.value.substr(0,ss) + key + el.value.substr(se);
 for (var x = meta.maxlength; x > 0; x--) {
  for (var y = meta.length-1; y >= 0; y--) {
   if (meta[y].code.length >= x) {
    tmp = val.split(meta[y].code.substr(0,x)).join(meta[y].char);
    if (x != meta[y].code.length && tmp != val)
     warning = true;
    val = tmp;
   };
  };
 }; 
 if (warning || val.length>maxlength) {
  el.classList.add("warning");
 } else {
  el.classList.remove("warning");
 }
 console.log(val);
 if (key && val.length>maxlength)
  event.preventDefault();
};
.warning {
 color:red;
}
<input onkeydown="meta(event,10)">

Espero esto te sirva, Saludos!! ;))...

1

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
        - (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;">

Saludos.

3
  • intento evaluar tu respuesta de la siguiente manera: coloco 1234, luego retrocedo hasta el 2 e intento ingresar [:heart:] pero me falla.
    – fwBasic
    Commented el 17 may. 2017 a las 3:58
  • He corregido ese problema en concreto pero auditar el campo caracter a caracter siempre tendrá inconvenientes si el usuario realiza modificaciones en el 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. Commented el 17 may. 2017 a las 14:33
  • Intenta determinar donde esta el cursor del input con la propiedad selectionStart y selectionEnd, así resolverás el problema en donde esta insertando el texto. igualmente, siempre tendrá que validar el <input> con el evento onChange para determinar si lo escrito cumple con los requerimientos, revisa mi respuesta.
    – fwBasic
    Commented el 17 may. 2017 a las 15:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.