当按下选项卡时,如何在焦点获得焦点时取消选择文本框的文本?

时间:2013-04-06 23:44:50

标签: javascript jquery jquery-ui

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

  1. 当文本框获得焦点时,如何取消选中文本,
  2. 将光标设置为文本框中文本的开头?
  3. 我尝试了以下方法,但没有任何好处:

    在textboxfocushandler中:

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

1 个答案:

答案 0 :(得分:0)

我认为问题是浏览器在执行焦点处理程序之前不会选择文本。您可以尝试使用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()插件方法,您可以使用该方法。