Как мне удержать курсор / каретку от перемещения внутри элемента ввода текста? - PullRequest
Новая
       27

Как мне удержать курсор / каретку от перемещения внутри элемента ввода текста?

2 голосов
/ 06 августа 2010

Я пытаюсь создать форму, которая работает аналогично странице поиска Google, а также Gmail и нескольким другим страницам (включая эту страницу - см. «Теги» на странице «Задать вопрос»).Когда текст вводится, появляется список параметров, и пользователь может использовать стрелки вверх и вниз, чтобы выбрать нужный вариант.

Проблема, с которой я сталкиваюсь, состоит в том, что стрелка вверх помещает курсор / каретку в положение 0 поля, а вниз - в конец.Есть ли простой способ удержать его от перехода в начало / конец, или мне нужно найти позицию каретки до запуска моей функции и переместить ее в это место после?

Это началофункция, которая запускается, когда текст вводится в элемент ввода (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 */
}

Дайте мне знать, если какой-либо другой код будет полезен.Спасибо за помощь.

Ответы [ 2 ]

3 голосов
/ 06 августа 2010

Вы хотели бы сохранить каретку раньше, а затем, когда вы закончите делать что-то, установите ее обратно.

Примерно так:

HTML тело: 

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

    });

});
1 голос
/ 06 августа 2010

Просто запретите действие по умолчанию для события. Вы можете сделать это, вернув false, если вы используете свойство обработчика события вместо addEventListener / attachEvent, что будет проще всего: 

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