Frage

Ich möchte einen Eingang haben, die in Großbuchstaben auf keyup ändern würde. So lege ich ein einfaches Ereignis auf keyup.

HTML

<input id="test"/>

Javascript (mit jQuery)

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

Aber ich fand, dass in Chrome und IE, wenn Sie Pfeil nach links drücken, die Cursor automatisch zu Ende bewegen. Ich bemerke, dass ich erkennen soll, wenn die eingegebene Buchstaben nur. Soll ich keycode Bereich oder regexp für die Erkennung verwenden?

Beispiel: http://jsbin.com/omope3

War es hilfreich?

Lösung

Sie können auch die folgenden Befehle verwenden (dies ist wahrscheinlich schneller und eleganter):

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

Aber das sendet die als typisierte Wert zurück in den Formulardaten, so verwenden Sie eines der folgenden speichern wie alle Caps in der Datenbank:

MySQL: UPPER(str)

PHP: strtoupper()

Andere Tipps

Eine andere Lösung, wenn Sie die Text-transform: Groß; CSS-Eigenschaft:

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

Und mit jQuery Hilfe Sie wählen die Unschärfe Ereignis :

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

Mit dieser Lösung, die Sie nicht oberen müssen die Datenbankfelder, können Sie den Cursor für die Bewegung verwenden und der Benutzer kann den Text in das Eingabefeld einfügen / überschreiben.

Verwenden Sie diese:

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

Und in der JS-Code Teil setzen:

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

Dieser Code wird nicht den Text ändern, wenn der Benutzer etwas eingegeben, die nicht Text ist (links oder rechts Pfeil).

Ja, sieht aus wie einige Browser bewegen Sie den Cursor an das Ende, wenn der Wert aktualisiert wird. Sie können dies tun:

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

, die nur den Wert ändern, wenn sie geändert werden muss. Sie jedoch, dass nach wie vor Blätter Sie mit dem Problem, dass, wenn Sie abd eingeben, nach links bewegen, Hit c zu abcd zu bekommen, werden der Cursor noch bis zum Ende umgeworfen werden.

Javascript (mit 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);
}

Sie wollen wahrscheinlich zu sehen keyCode in Ihrer keyup Funktion.

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();
    }
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top