Standardverhalten in Texteingabe verhindern, während Pfeil nach oben drücken

Question

Ich arbeite mit einfacher HTML-<input type="text"/> Textfeld mit einem numerischen Wert.

Ich füge JavaScript-Event keyup zu sehen, wenn der Benutzer drückt Taste Pfeil nach oben (e.which == 38.) - dann habe ich den numerischen Wert erhöhen

Der Code funktioniert gut, aber es gibt eine Sache, die nervt mich. Sowohl Safari / Mac und Firefox / Mac bewegen Sie den Cursor am Anfang, wenn ich den Pfeil nach oben-Taste drücken. Dies ist ein Standardverhalten für jedes <input type="text"/> Textfeld, soweit ich weiß, und es macht Sinn.

Aber das schafft nicht eine sehr ästhetische Wirkung Cursor springt zurück und nach vorn (nach Wert geändert wurde).

Der Sprung am Anfang geschieht auf keydown aber auch mit diesem Wissen, das ich nicht in der Lage bin, es zu verhindern, auftritt. Ich habe versucht, die folgenden:

input.addEventListener('keydown', function(e) {
    e.preventDefault();
}, false);

Putting e.preventDefault() in keyup Veranstaltung auch nicht hilft.

Gibt es eine Möglichkeit Cursor nicht mehr bewegen lässt?

Answer 1

Zur Erhaltung Cursorposition, Backup input.selectionStart vor Wert zu ändern.

Das Problem ist, dass WebKit auf keydown reagiert und Opera bevorzugt keypress, also gibt es Flickschusterei. Beide behandelt werden und gedrosselt

var ignoreKey = false;
var handler = function(e)
{
    if (ignoreKey)
    {
        e.preventDefault();
        return;
    }
    if (e.keyCode == 38 || e.keyCode == 40) 
    {
        var pos = this.selectionStart;
        this.value = (e.keyCode == 38?1:-1)+parseInt(this.value,10);        
        this.selectionStart = pos; this.selectionEnd = pos;

        ignoreKey = true; setTimeout(function(){ignoreKey=false},1);
        e.preventDefault();
    }
};

input.addEventListener('keydown',handler,false);
input.addEventListener('keypress',handler,false);

Answer 2

Ich fand, dass eine bessere Lösung nur auf return false; ist den Standardpfeil Verhalten zu verhindern:

input.addEventListener("keydown", function(e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') return false;
}, false);

Answer 3

Eigentlich gibt es eine bessere und einfachere Methode, um diese Arbeit zu tun.

$('input').bind('keydown', function(e){
    if(e.keyCode == '38' || e.keyCode == '40'){
        e.preventDefault();
    }
});

Ja, es ist so einfach!

Answer 4

testete ich den Code und es scheint, dass es die Veranstaltung absagt, aber wenn Sie auf den Pfeil nicht für sehr kurze Zeit drücken - es feuert keypress Ereignis und das Ereignis tatsächlich bewegt den Cursor. Verwenden Sie einfach prevent () auch in Ereignishandler keypress und es sollte in Ordnung sein.

Answer 5

Wahrscheinlich nicht. Sie sollten stattdessen für eine Lösung zu suchen, um den Cursor auf das Ende des Feldes zu bewegen, wo es war. Der Effekt wäre das gleiche für den Anwender, da sie zu schnell von einem Menschen wahrgenommen zu werden.

Ich googeln einige und fand dieses Stück Code. Ich kann es jetzt nicht testen und es wird gesagt, nicht mehr als 6 auf IE zu arbeiten.

textBox.setSelectionRange (textBox.value.length, textBox.value.length);