Domanda

Mi piacerebbe avere un ingresso che avrebbe cambiato in lettere maiuscole su keyup. Così allego un semplice evento su keyup.

HTML

<input id="test"/>

Javascript (con jQuery)

$("#test").keyup(function(){
  this.value = this.value.toUpperCase();
});

Ma ho scoperto che in Chrome e IE, quando si preme freccia a sinistra, il cursore si muove automaticamente alla fine. Ho notato che dovrebbe rilevare se l'ingresso è unica lettera. Dovrei usare gamma codice chiave o espressioni regolari per il rilevamento?

Esempio: http://jsbin.com/omope3

È stato utile?

Soluzione

In alternativa, è possibile utilizzare il seguente (questo è probabilmente più veloce e più elegante):

<input style="text-transform: uppercase" type='text'></input>

Ma che invia il valore-typed indietro nei dati del modulo, in modo da utilizzare uno dei seguenti per memorizzare come tutto in maiuscolo nel database:

MySQL: UPPER(str)

PHP: strtoupper()

Altri suggerimenti

Un'altra soluzione, se si utilizza il text-transform: uppercase; proprietà CSS:

<input id='test' style='text-transform: uppercase;' type='text'></input>

E con jQuery aiuterà a scegliere il evento sfocatura :

$("#test").blur(function(){
  this.value = this.value.toUpperCase();
});

Con questa soluzione, non c'è bisogno di alto i campi del database, è possibile utilizzare il cursore per il movimento e l'utente può inserire / riscrivere il testo nel campo di input.

Utilizzare questa:

<input onkeyup="MakeMeUpper(this)" type="text"/>

E nel tuo JS Codice Parte messo:

function MakeMeUpper(f, e){ 
  var actualValue = f.value;        
  var upperValue = f.value.toUpperCase();
  if( actValue != upperValue){
    f.value = upperValue;       
  }   
}

Questo codice non cambierà il testo, se l'utente ha immesso qualcosa che non è un testo (sinistra o freccia a destra).

Si, sembra che alcuni browser spostare il cursore alla fine quando il valore viene aggiornato. Si potrebbe fare questo:

$("#test").keyup(function(){
  var upper = this.value.toUpperCase();
  if (this.value != upper) 
      this.value = upper;
});

che cambierà solo il valore se ha bisogno di essere cambiato. Tuttavia, che lascia ancora con il problema che se si digita abd, spostare a sinistra, c colpire per ottenere abcd, il cursore sarà ancora ottenere spostato alla fine.

Javascript (con jQuery)

$("#test").keyup(function(){
  $(this).val($(this).val().toUpperCase());
});
var str = $(this).val();
if (evt.keyCode != 37 && evt.keyCode != 39)
{
    str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
    $(this).val(str);
}

Probabilmente si desidera guardare keyCode nella funzione keyup.

var UP_ARROW = 38,
    DOWN_ARROW = 40;

$('#test').keyup(function(evt){
    if (evt.keyCode == UP_ARROW)
    {
        this.value = this.value.toUpperCase();
    }

    if (evt.keyCode == DOWN_ARROW)
    {
        this.value = this.value.toLowerCase();
    }
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top