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

标签 javascript jquery jquery-ui

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

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

最佳答案

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

关于javascript - 当文本框获得焦点时,按下选项卡时,如何取消选择文本框的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15857260/

相关文章:

javascript - 在 Typescript 的类型注释中使用 'is' 关键字的目的是什么

javascript - Jquery 函数未正确执行

javascript - 在 vue.js 组件中操作 props

javascript - 如何使用 jQueryUI 拖动来模拟阻力?

jQuery UI 选项卡 - 如果相应的内容面板为空,如何删除选项卡列表项?

javascript - JQueryUI 垂直选项卡 - 添加一些(显然不相关的)CSS 样式后,用于选项卡功能的 JS 停止工作

javascript - 两人 - 回合制游戏

javascript - Keycodes/onclick enter,显示多个innerHTML名称

jquery - 使用 jQuery 添加新的 ASP.NET 服务器控件?

javascript - Ember.js Ajax 调用未按预期工作