Devolver valor en evento onkeypress (Firefox)

JavierB · #1 (**permalink**) 23/06/2005, 12:57

Hola a todos.

Os pongo un código de ejemplo:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function pulsar(e) {

  tecla = (document.all) ? e.keyCode : e.which;

  if (tecla==65)

    e.keyCode=66; //esto solo funciona en IE

}

</script>

</head>

<body>

<input type="text" onkeypress="return pulsar(event)" />

</body>

</html>

Lo que quiero hacer es que cuando se pulse la tecla "A" en el cuadro aparezca la "B". Con IE no hay problema, en cambio con Firefox captura bien el valor de la tecla, pero no se como devolver un código distinto. Parece ser que which es de solo lectura.

He probado también con return 66; pero que si quieres arroz Catalina

Gracias por vuestras sugerencias. Saludos,

caricatos · #2 (**permalink**) 23/06/2005, 13:16

Hola JavierB:

No me imagino tu intención, pero sabiendo el código puedes usar String.fromCharCode(tecla)...

Código:

<html> 
<head> 
<script type="text/javascript"> 
function pulsar(e) { 
  tecla = (document.all) ? e.keyCode : e.which; 
  if (tecla==65) 
    return String.fromCharCode(++tecla); //esto solo funciona en IE 
  else return String.fromCharCode(tecla);
} 
</script> 
</head> 
<body> 
<input type="text" onkeypress="this.value += pulsar(event); return false" /> 
</body> 
</html>

Aunque si quieres usar algún control de edición se fastidia el invento, pero siempre podrás usar mi magnífico editos... (no es spam...)

Saludetes

tunait · #3 (**permalink**) 23/06/2005, 13:24

Hola Javier

er.... se me adelantó caricatos ('nas

) y además su propuesta funciona perfectamente

así que me ahorro teclear más, pero yá que ando por aquí pues ... saludo

JavierB · #4 (**permalink**) 23/06/2005, 13:31

Hola caricatos. Gracias por contestar.

Mi intención solo es aprender y jugar un poco con el código (no necesariamente en ese orden

) Es un tema que tengo "pendiente" desde hace tiempo y me lo ha recordado un mensaje al que has contestado tú (Convertir a mayúsculas). Podría hacerse un código muy majete y sencillo para que se cambiara a mayúsculas según se escribe, pero me temo que solo funcionaría en IE.

Sobre el código que has puesto, te comento... La pega que le veo es que siempre pone la tecla pulsada al final; si te pones en medio de lo que ya hay escrito, sigue poniendolo al final.

Gracias de todas formas.

Un saludo también para tunait que veo que ha participado en el mensaje mientras yo aporreaba el teclado para soltar todo esta parrafada.

Saludos,

caricatos · #5 (**permalink**) 23/06/2005, 13:58

Hola otra vez:

Bueno, lo del final del texto ya lo sabía y probando el tema, me puse a borrar letras y llegó el caos, aunque por eso te comenté lo de los controles...

Me imagino que ya habrás visto el editor: http://www.pepemolina.com/editor/index.html

No es mucho código y funciona en ie, mozilla y opera (a partir de la versión 8) y no lo he probado en otros navegadores... Si crees que se le puede añadir algo y te interesa "jugar" con el código, sabes que por mi parte tienes libertad absoluta...

Hola tunait

... hacía tiempo que no coincidíamos... tal vez tu idea pueda interesar a javi.

Saludetes

kepawe · #6 (**permalink**) 23/06/2005, 16:43

Hola JavierB y compañía.

He probado el código en Mozilla y funciona me imagino que en Firefox debe funcionar, el código para I.E te lo dejo a ti, no dispongo de tiempo y ahora mismo no se por donde empezar, es un tema que tengo un poco olvidado, seguro que el código para I.E ya lo tendrás hecho.

Código:

<html>
<head>
<script type="text/javascript">
function pulsar(e) {
  tecla = (document.all) ? e.keyCode : e.which;
  
  if(tecla == 9 || tecla == 0) return false;
  if(tecla == 8) return true;
  if(window.Event){
      var pst = e.currentTarget.selectionStart;
      var string_start = e.currentTarget.value.substring(0,pst);
      var string_end = e.currentTarget.value.substring(pst ,e.currentTarget.value.length);
      e.currentTarget.value = string_start+ String.fromCharCode(tecla).toUpperCase()+ string_end;
      e.currentTarget.selectionStart = pst + 1;
      e.currentTarget.selectionEnd = pst + 1;
      e.stopPropagation();
      return false;
  }
  else if (!window.Event)e.keyCode=66; //esto solo funciona en IE
}
</script>
</head>
<body>
<input type="text" onkeypress="return pulsar(event)" />
</body>
</html>

También funciona el código en Opera 8 .

Saludos

JavierB · #7 (**permalink**) 24/06/2005, 09:00

Hola kepawe

Muy bueno el código

muchas gracias. Efectivamente funciona en Firefox. Le he añadido unas líneas para que sirva también en IE y esto es lo que ha quedado:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function pulsar(e) {

  tecla = (document.all) ? e.keyCode : e.which;

  if(tecla == 9 || tecla == 0) return true;

  if(tecla == 8) return true;

  if(window.Event){

      var pst = e.currentTarget.selectionStart;

      var string_start = e.currentTarget.value.substring(0,pst);

      var string_end = e.currentTarget.value.substring(pst ,e.currentTarget.value.length);

      e.currentTarget.value = string_start+ String.fromCharCode(tecla).toUpperCase()+ string_end;

      e.currentTarget.selectionStart = pst + 1;

      e.currentTarget.selectionEnd = pst + 1;

      e.stopPropagation();

      return false;

  }

  else {

    te = String.fromCharCode(tecla);

    te = te.toUpperCase();

    num = te.charCodeAt(0);

    e.keyCode = num;

  }

}

</script>

</head>

<body>

<input type="text" onkeypress="return pulsar(event)" />

</body>

</html>

Gracias de nuevo. Saludos,

kepawe · #8 (**permalink**) 24/06/2005, 10:20

De nada, JavierB

, muy buena idea el código para I.E

, gracias también a ti por esas buenas ideas, estoy aprendiendo mucho gracias a gente como tú que me muestran nuevos y mejores caminos.

Saludos

xknown · #9 (**permalink**) 24/06/2005, 11:14

Excelente demostración de código, pero creo que sería mas fácil de hacerlo con css para el ejemplo que proponen (Convertir a mayúsculas)

Código:

<html>
<head>
<style type="text/css">
.mayus {
	text-transform: uppercase;	
}
</style>
</head>
<body>
<input type="text" class="mayus" />
</body>
</html>