problema keyup Maiúsculas

Question

Eu gostaria de ter uma entrada que iria mudar para maiúsculas em keyup. Então eu anexar um evento simples em keyup.

HTML

<input id="test"/>

Javascript (com jQuery)

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

Mas descobri que no Chrome e IE, quando você empurra seta para a esquerda, o cursor se mover automaticamente ao fim. Eu observo que eu deveria detectar se a entrada é única carta. Devo usar faixa de código de acesso ou regexp para detecção?

Exemplo: http://jsbin.com/omope3

Answer 1

Ou você pode usar o seguinte (este é, provavelmente, mais rápido e mais elegante):

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

Mas que envia as costas valor digitado os dados do formulário, portanto, use um dos seguintes procedimentos para armazená-lo como em maiúsculas no banco de dados:

MySQL: UPPER(str)

PHP: strtoupper()

Answer 2

Outra solução, se você usar o text-transform: uppercase; propriedade css:

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

E com jQuery ajuda você a escolher o evento borrão :

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

Com esta solução, você não tem que superior os campos de banco de dados, você pode usar o cursor para o movimento e o usuário pode inserir / reescrever o texto no campo de entrada.

Answer 3

Use esta:

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

E em seu JS Código Parte colocar:

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

Este código não vai mudar o texto se o usuário digitou algo que não é texto (esquerda ou seta para a direita).

Answer 4

Sim, parece que alguns navegadores mover o cursor para o final quando o valor é atualizado. Você poderia fazer isso:

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

que só irá alterar o valor se ele precisa ser mudado. No entanto, isso ainda deixa você com o problema que se você digitar abd, mover para a esquerda, c hit para obter abcd, o cursor ainda se movido para o final.

Answer 5

Javascript (com jQuery)

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

Answer 6

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);
}

Answer 7

Você provavelmente vai querer olhar para keyCode em sua função 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();
    }
});