Javascript 如何防止光标/插入符号在输入文本元素中移动？

我正在尝试构建一个表单，它的工作方式类似于谷歌搜索页面，以及Gmail和其他几个页面（包括this页面-请参阅提问页面上的“标签”输入）。当输入文本时，将出现一个选项列表，用户可以使用上下箭头选择所需的选项

我遇到的问题是，向上箭头将光标/插入符号置于字段的位置0，向下箭头将光标/插入符号置于字段的末尾。有没有一种简单的方法可以防止它移动到开始/结束，或者我需要在运行函数之前找到插入符号的位置，然后将其重新定位到该位置

这是在输入元素（onkeyup）中输入文本时运行的函数的开始

---

让我知道是否有更多的代码将是有用的。谢谢您的帮助。

您可能希望在完成操作之前存储插入符号，然后将其放回原位

大概是这样的：

HTML正文：

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

---

只需防止事件的默认操作。如果使用的是事件处理程序属性，而不是

addEventListener

/

attachEvent

，则可以通过返回

false

来执行此操作，这是最简单的方法：

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

---

由于某种原因，当我点击向上箭头时，光标返回到文本的开头。很难知道出了什么问题，因为当我用firebug或Chrome的工具进入代码时，整个浏览器都失去了焦点，所以我看不到光标在哪里以及何时移动。@smfoote-你试过使用我上面写的东西吗？您是否在完成某项操作后设置光标？您可以发布相关的HTML吗？如果上下箭头需要将焦点移到其他位置，这将非常有用，但是，由于它们不需要，保存位置并恢复它似乎是不必要的。防止默认事件更容易。我发现jquery的preventDefault（）功能在FF中有效，但在Chrome中不起作用，所以我还是有点卡住了。@TheCloudlessky-是的，我确实试过你写的东西。这对我不起作用。是输入元素的html。

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

    });

});

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