jquery 输入全选焦点

Question

当用户关注该字段时，我使用此代码尝试选择该字段中的所有文本。发生的情况是，它选择了所有内容一秒钟，然后取消选择，并且打字光标留在我单击的位置...

$("input[type=text]").focus(function() {
   $(this).select();
});

我希望所有内容都保持选中状态。

Answer 1

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

Answer 2

尝试使用 click 而不是 focus。它似乎适用于鼠标和按键事件（至少在 Chrome/Mac 上）：

jQuery <版本 1.7：

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery 版本 1.7+：

$("input[type='text']").on("click", function () {
   $(this).select();
});

这是一个演示

Answer 3

我认为发生的情况是这样的：

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

解决方法可能是异步调用 select() ，以便它在 focus() 之后完全运行：

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

Answer 4

我认为这是更好的解决方案。与简单地在 onclick 事件中选择不同，它不会阻止使用鼠标选择/编辑文本。它适用于包括 IE8 在内的主要渲染引擎。

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

Answer 5

这里有一些不错的答案，@user2072367 是我最喜欢的，但是当您通过选项卡而不是通过单击聚焦时，它会产生意想不到的结果。 （意想不到的结果：要通过选项卡获得焦点后正常选择文本，您必须再单击一次）

这个小提琴修复了这个小问题bug 并另外将 $(this) 存储在变量中以避免冗余 DOM 选择。一探究竟！ (:

在 IE > 8 下测试

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

Answer 6

经过仔细审查，我建议将此作为此线程中更清晰的解决方案：

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

JSFiddle 中的演示

问题：

这是一点解释：

首先，让我们看一下当您将鼠标或 Tab 键移入字段时事件的顺序。
我们可以像这样记录所有相关事件：

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

注意：我已更改此解决方案以使用 click 而不是 mouseup，因为它稍后会在事件管道中发生，并且似乎是根据 @Jocie 的评论，在 Firefox 中造成一些问题

某些浏览器尝试在 mouseup 或 click 事件期间定位光标。这是有道理的，因为您可能希望在一个位置开始插入符号并拖动以突出显示某些文本。在您实际抬起鼠标之前，它无法指定插入符号的位置。因此，处理焦点的函数注定会过早响应，从而使浏览器覆盖您的定位。

但问题是我们确实想处理焦点事件。它让我们知道有人第一次进入该领域。之后，我们不想继续覆盖用户选择行为。

解决方案：

相反，在 focus 事件处理程序中，我们可以快速附加 click （单击）和 keyup （制表符）的侦听器即将触发的事件。

注意：选项卡事件的 keyup 实际上会在新的输入字段中触发，而不是在之前的输入字段中触发一个

我们只想触发该事件一次。我们可以使用 .one("click keyup)，但这会为每种事件类型调用一次事件处理程序相反，一旦按下 mouseup 或 keyup，我们要做的第一件事就是删除两者的处理程序，这样无论我们是按 Tab 键还是用鼠标键都无关紧要。该函数应该只执行一次。

注意：大多数浏览器自然会在选项卡事件期间选择所有文本，但正如 animatedgif 指出的，我们仍然想要处理 keyup 事件，否则 mouseup 事件在我们按下 Tab 键时仍然会徘徊。我们监听这两个事件，以便我们可以将我们处理完选择后立即关闭听众。

现在，我们可以在浏览器做出选择后调用 select()，这样我们就可以确保覆盖默认行为。

最后，为了提供额外的保护，我们可以将 事件命名空间 添加到mouseup 和 keyup 函数，因此 .off() 方法不会删除可能正在播放的任何其他侦听器。

---

在 IE 10+、FF 28+ 和 IE 10+ 中测试Chrome 35+

---

或者，如果您想使用 名为 once 的函数来扩展 jQuery，该函数将针对任何事件数量：

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

那么你可以进一步简化代码，如下所示：

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

小提琴演示

Answer 7

这将完成工作并避免您无法再通过鼠标选择部分文本的问题。

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

Answer 8

大多数这些解决方案的问题在于，当更改输入字段中的光标位置时，它们无法正常工作。

onmouseup 事件更改字段内的光标位置，该事件在 onfocus 之后触发（至少在 Chrome 和 FF 中）。如果您无条件丢弃mouseup，则用户无法使用鼠标更改光标位置。

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

如果该字段当前没有焦点，该代码将有条件地阻止 mouseup 默认行为。它适用于以下情况：

• 当字段未获得焦点时单击
• 单击当字段具有焦点时
• 按 Tab 键进入字段

我已在 Chrome 31、FF 26 和 IE 11 中对此进行了测试。

Answer 9

此版本适用于 ios，还修复了 Windows chrome 上的标准拖动选择

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc /2/

Answer 10

阅读此帖子找到了一个很棒的解决方案

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

Answer 11

我来自 2016 年底，这段代码仅适用于最新版本的 jquery（本例中为 jquery-2.1.3.js）。

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

Answer 12

我总是使用 requestAnimationFrame() 来跳过内部事件后机制，这在 Firefox 中完美运行。尚未在 Chrome 中进行测试。

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});

Answer 13

或者您可以只使用 效果很好。

Answer 14

var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

如果您在两个输入之间快速切换，请使用clearTimeout以提高安全性。
clearTimeout 清除旧的超时...

Answer 15

您可以使用简单的代码：

$('#idname').select();

Answer 16

与原生 JavaScript select() 配合得很好。

$("input[type=text]").focus(function(event) {
   event.currentTarget.select();
});

或者一般来说：

$("input[type=text]")[0].select()

Answer 17

我使用 FF 16.0.2 和 jquery 1.8.3，答案中的所有代码都不起作用。
我使用这样的代码并工作。

$("input[type=text]").focus().select();