javascript - 当文本框获得焦点时，按下选项卡时，如何取消选择文本框的文本？

Question

我有一系列连续的文本框，用于输入时间。当用户返回到已编辑的文本框时，浏览器会突出显示该文本框中的文本。

1. 当文本框获得焦点时，如何取消选择其中的文本，以及
2. 将光标设置到文本框中文本的开头？

我尝试了以下方法，但没有效果:

在文本框焦点处理程序中:

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

选择文本框的处理程序:

if (window.getSelection) {
    if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
    }
} else if (document.selection && document.selection.empty) {  // IE?
    document.selection.empty();
}

Answer 1

我认为问题在于浏览器在执行焦点处理程序之前不会选择文本。您可以尝试使用 setTimeout() 来延迟代码，如下所示:

$('input').focus(function() {
    var $input = $(this);
    setTimeout(function() {
        setCaretPos($input[0], 0, 0);
    }, 0)
});

<强> jsfiddle demo

这使用以下方法来设置插入符位置。

function setCaretPos(element, begin, end) {
    if (element.setSelectionRange) {
        element.setSelectionRange(begin, end);
    } else if (element.createTextRange) {
        var range = element.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', begin);
        range.select();
    }
}

如果您决定希望焦点位于文本末尾，您可以使用:

var end = $input.val().length;
setCaretPos($input[0], end, end);

信用:

我从 jQuery mask plugin 获取了 setCaretPos() 函数的代码。该插件包含您可以使用的 .caret() 插件方法。