Come faccio a mantenere il mio cursore / cursore di muoversi all'interno di un elemento di testo di input?

Question

Sto cercando di costruire una forma che funziona in modo simile alla pagina di ricerca di Google, così come Gmail e molte altre pagine (compresa la pagina - vedere l'ingresso "Tag" nella pagina Fai una domanda). Come testo di input, viene visualizzato un elenco di opzioni, e l'utente può utilizzare frecce su e giù per selezionare l'opzione che vogliono.

Il problema che sto avendo è che la freccia su sposta il cursore / cursore in posizione 0 del campo, e giù lo mette alla fine. C'è un modo semplice di tenere che si sposti a inizio / fine, o ho bisogno di trovare la posizione del cursore prima che la mia funzione è gestito, e riposizionarlo a quel punto, dopo?

Questo è l'inizio della funzione che viene eseguito quando quando il testo viene inserito nella elemento di input (onKeyUp).

var keycode = checkKeycode (event);   // returns the keycode of the key pressed.
if (keycode == 38) {         // up arrow
    var selection = $(".optionsSelected").attr("id");
    var selId = parseInt(selection.replace('briefOption', ''));
    if (selId != 0) {
        $(".optionsSelected").removeClass("optionsSelected");
        var newSelId = selId - 1;
        $("#briefOption"+newSelId).addClass("optionsSelected");
    }
}
else if (keycode == 40) {     // down arrow
    var selection = $(".optionsSelected").attr("id");
    var selId = parseInt(selection.replace('briefOption', ''));
    if (selId != numAvEmps && numAvEmps != 0) {
        $(".optionsSelected").removeClass("optionsSelected");
        var newSelId = selId + 1;
        $("#briefOption"+newSelId).addClass("optionsSelected");
    }
}
else if (keycode == 27) {    // Escape
    $("#docDropDown").css("display","none");
}
else if (keycode == 9 || keycode == 13) {     //tab or enter
    /* Fill form */
}

Fammi sapere se qualsiasi codice più sarebbe utile. Grazie per l'aiuto.

Answer 1

Che ci si vuole memorizzare il punto di inserimento prima e poi quando hai finito di fare le cose, impostare nuovamente.

Qualcosa di simile a questo:

HTML del corpo:

<input type="text" id="mytextbox" style="border: 1px solid black" />

Javascript:

function getCaretPosition(ctrl)
{
    var caretPos = 0;    
    // IE
    if (document.selection)
    {
        ctrl.focus ();
        var sel = document.selection.createRange();
        sel.moveStart ('character', -ctrl.value.length);
        caretPos = sel.text.length;
    }
    // Firefox
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
    {
        caretPos = ctrl.selectionStart;
    }

    return caretPos;
}

function setCaretPosition(ctrl, pos)
{
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange)
    {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}



$(document).ready(function ()
{

    $("#mytextbox").keydown(function (e)
    {
        // Up
        if(e.which == 38)
        {
            var pos = getCaretPosition(this);

            // Do stuff here that changes the value/caret?

            setCaretPosition(this, pos);
        }
        // Down
        else if(e.which == 40)
        {
            var pos = getCaretPosition(this);

            // Do stuff here that changes the value/caret?

            setCaretPosition(this, pos);
        }

    });

});

Answer 2

Proprio a prevenire l'azione predefinita dell'evento. È possibile farlo con il ritorno false se si sta utilizzando una proprietà di gestore di eventi piuttosto che addEventListener / attachEvent, che sarebbe il modo più semplice:

var input = document.getElementById("your_input");
var suppressKeypress = false;

input.onkeydown = function(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode;
    if (keyCode == 38) {
        // Do your stuff here
        suppressKeypress = true; // For Opera; see below
        return false;
    }
    // Other cases here
};

// This bit is for Opera, which only allows you to suppress the default
// action of a keypress in the keypress event (not keydown)
input.onkeypress = function() {
    if (suppressKeypress) {
        suppressKeypress = false;
        return false;
    }
};