光标移动到文本字段的开头

Question

光标移动到文本字段的开头

javascriptjqueryinternet-explorerinternet-explorer-8html-input

6

我在使用IE8时遇到一个问题，当我聚焦在一个已有文本的输入框上时，光标会跑到该输入框的开头。我想把光标设置到末尾。我在谷歌上搜索到了以下解决方案：

function setSelectionRange(input, selectionStart, selectionEnd) {
    input = document.getElementsByTagName("input")[0];
    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    }
}

这里的“输入”只是一个位于类中的输入字段（var inputElement = this.input;）。问题在于，“setSelectionRange”和“createTextRange”都无法正常工作。我做错了什么吗？“createTextRange”只适用于文本区域吗？

@编辑：好像我正在使用“两个对象”，一个是js输入，另一个是jquery输入，将输入更改为document.getElementsByTagName("input")[0];之后，我能够进入“createTextRange”分支，但仍然无法更改光标位置。

@编辑2：我稍微修改了代码，现在从文档中获取输入并进入if分支。但是浏览器显示：

Unexpected call to method or property access.

在这一行中 var range = input.createTextRange(); @Edit3: 回答James的问题。我有一个类，整个类都与一个jsp相关联，该jsp具有一个输入框。在这个类中，我为与jsp相关联的输入字段设置了一个焦点处理器inputElement.focus(onInputFocus)，然后我有以下内容：

function onInputFocus() {
    isFocused = true;
    valueDivElement.hide();
    labelElement.html(labelFocus);
    if (currentData.selectedEntityCode) {
        inputElement.val(currentData.selectedEntityCode);
        inputElement.attr('title', currentData.selectedEntityCode);
    } else {

    }

    var input = document.getElementsByTagName("input")[0];
    input.value = input.value;
}

整个类显然要大得多，这不是我的代码，但我猜这应该是最后执行的事情。

- Mateusz Dymczyk

这个函数可以正常工作于 <input type="text"> 元素。你确定你传递的元素是一个 DOM 输入元素吗？ - Tim Down

是的，我已经仔细检查过了。现在问题出在“var range = input.createTextRange();”这一行，不知道为什么。它进入了那个分支，但在那一行失败了，其余部分也没有执行。 - Mateusz Dymczyk

如果它失败了，错误信息是什么？你在哪里设置焦点？ - Dr.Molle

我添加了我收到的错误信息。我没有设置焦点在任何地方。 - Mateusz Dymczyk

我只在使用单选框/复选框时收到错误消息。是否可以通过jsfiddle创建演示以展示此错误？ - Dr.Molle

我遇到了完全相同的问题，只是在IE中。光标会跳到字符串的开头，我已经尝试了所有的选项。你知道这是什么原因吗？这是我的帖子链接：http://stackoverflow.com/questions/10405450/mouse-cursor-jumps-to-the-start-of-a-string-in-an-text-input-field-in-ie - Shawn J. Molloy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Wiseman · Accepted Answer

对不起，我有点不明白。你是想把光标设置到末尾还是突出范围？你的问题似乎暗示前者，但解决方案实现的是后者。

如果你只想将光标设置到末尾，则上述函数是不必要的。一旦焦点被设置，只需执行以下操作：

input.value = input.value; //assumes input is a DOM element.

请参考这个JSFiddle: http://jsfiddle.net/7vdv6/ 编辑：据我所见，有很多可能会分散你的注意力的东西。

isFocused = true;
valueDivElement.hide();
labelElement.html(labelFocus);
if (currentData.selectedEntityCode) {
    inputElement.val(currentData.selectedEntityCode);
    inputElement.attr('title', currentData.selectedEntityCode);
} else {

}

如果在您的最后两行之间添加focus()，会发生什么事情：

var input = document.getElementsByTagName("input")[0];
input.focus();
input.value = input.value;

你的jQuery和标准JavaScript混乱不堪。例如，你为什么要使用document.getElementsByTagName("input")[0]而不是$("input:first")呢？