[SOLUCIONADO] Cómo detectar letras con acentos con keypress

MCF · #1 (**permalink**) 10/01/2014, 23:43

Hola, lo que sucede es que estoy tratando de hacer una página en donde tengo un textarea y un div, cada que se escribe algo en el textarea se muestra en el div, con la función String.fromCharCode, el problema es que no detecta las vocales acentuadas, lo intenté con keypress y con keyup pero ninguno parece detectarlo, ¿alguien sabe como podría hacerlo ?

PHPeros · #2 (**permalink**) 11/01/2014, 05:32

Si usas fromCharCode no va a dar resultado, ya que las vocales acentuadas, "ñ" y otros caractéres no tienen valor ASCII. Por otra parte JavaScript depende ligeramente de HTML así que para no tener problemas de codificación añade esto en el head:

Código HTML:

Ver original<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Alexis88 · #3 (**permalink**) 11/01/2014, 06:21

Y a partir de HTML5, solamente necesitas colocarlo así:

Código HTML:

Ver original<meta charset = UTF-8 />

Saludos

jonni09lo · #4 (**permalink**) 11/01/2014, 07:25

Cita:

Iniciado por Alexis88

Y a partir de HTML5, solamente necesitas colocarlo así:

Código HTML:

Ver original<meta charset = UTF-8 />

Saludos

No olvides encerrar su valor entre comillas

Código HTML:

Ver original<meta charset="UTF-8" />

Saludos

Alexis88 · #5 (**permalink**) 11/01/2014, 07:34

Cita:

Iniciado por jonni09lo

No olvides encerrar su valor entre comillas

Antes lo hacía así, pero vi que en las plantillas de JS Bin no las ponen y de todos modos va bien.

jonni09lo · #6 (**permalink**) 11/01/2014, 07:45

No es una buena practica, además es mejor guiarse por los estándares... Digamos que soy mas purista en ese aspecto... muchas veces por no colocar las comillas pueden generar problemas y si la persona que es novata en este aspecto ve que le sugieren no usar comillas lo más seguro es que siga tirando por el mismo lado (ya que desconoce que si el valor de un atributo tiene mas de dos palabras deben si o si ir entre comillas para que tome el valor correctamente)

Así que para evitar confusiones y las cosas se hagan bien, es mejor dejar las cosas claras (no pienses a quien le respondes, piensa en quienes te leerán

)

Saludos

Alexis88 · #7 (**permalink**) 11/01/2014, 07:51

Técnicamente, no son dos palabras: UTF-8 <> UTF 8. Es como lo que sucede en el atributo class, no es lo mismo colocar "clase-uno" que "clase uno", la forma en que afectaría la desaparición del guión, se haría evidente al momento de aplicar los estilos.

De cualquier forma, es aconsejable hacerlo del modo establecido por el estándar de la W3C.

Saludos

MCF · #8 (**permalink**) 11/01/2014, 14:57

Yo también lo hacía sin comillas, pero también son muchas las personas que me recomiendan que las ponga ya que no todos los navegadores lo reconocen igual; entonces no hay forma de detectarlo, o como podría hacerlo ?

PHPeros · #9 (**permalink**) 11/01/2014, 15:12

¿Qué obligación hay de usar fromCharCode? Si lo utilizas te saldrán letras extrañas.

Recoge ese valor directamente y manipúlalo, teniendo el meta charset declarado.

Alexis88 · #10 (**permalink**) 11/01/2014, 15:34

¿Estás buscando hacer algo como esto?: http://jsbin.com/aKAliViS/1

Si la respuesta es sí, la forma es la siguiente:

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
<head>
    <meta charset = "UTF-8" />
    <titulo>De Textarea a Div</title>
</head>
<body>
    <textarea id = "uno"></textarea>
    <div id = "dos"></div>
</body>
</html>

Un poco de estilos para ambos elementos:

Código CSS:

Ver original#dos{
    border: .1em #000 solid;
    overflow: auto;
}
 
#uno, #dos{
    width: 20em;
    height: 5em;  
    font-family: Verdana;
}

Y con JS, asignas lo escrito en el textarea al div.

Código Javascript:

Ver originalvar textarea = document.getElementById("uno"),
    div = document.getElementById("dos");
 
textarea.addEventListener("keypress", function(e){
    var tecla = e.keyCode || e.which;
    if (tecla == 8)
        div.innerHTML = div.innerHTML.substring(0, div.innerHTML.length -2);
    else
        div.innerHTML += String.fromCharCode(tecla);
}, false);

Además, cuando borres el último caracter del textarea, se eliminará su equivalente en el div. Esto se puede mejorar mucho, lo dejo en tus manos porque ando algo atareado con mi trabajo.

Saludos

P.D.: He intentado detectar la pulsación de la tecla backspace, previamente habiendo leído que su valor ASCII es 8, pero no sucede lo esperado. ¿Alguien sabe cómo detectar la pulsación de dicha tecla?.

MCF · #11 (**permalink**) 11/01/2014, 15:43

Cierto, lo siento olvidé decir algunos detalles, lo que sucede es que en el div tengo algunos span, las letras se irán agregando en diferentes span, o fuera de ellos, dependiendo de que letra sea, es por eso que necesito identificarlas, con keypress o keyup ni siquiera detecta bien la pulsación,estuve pensándolo un poco y tal vez podría detectar el cambio en el textarea y de ahí ya manipular todos los datos, ¿creen ustedes que esa es la mejor opción ?