jquery输入在焦点上选择全部

Question

当用户专注于该字段时,我正在使用此代码尝试选择字段中的所有文本.会发生什么,它选择全部一秒钟,然后取消选择,键入光标留在我点击的位置...

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

我希望这一切都保持选中状态.

Answer 1

尝试使用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 2

我认为发生的事情是这样的:

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 3

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

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

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

Answer 4

这里有一些不错的答案,@ user2072367是我的最爱,但是当你通过tab而不是点击进行聚焦时会产生意想不到的结果.(意外结果:通过选项卡聚焦后正常选择文本,您必须再单击一次)

这个小提示修复了这个小错误并另外将$(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 5

经过仔细审查,我认为这是一个更清晰的解决方案:

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

在jsFiddle演示

问题:

这里有一点解释:

首先,让我们看一下鼠标或制表符到字段时的事件顺序.
我们可以记录所有相关事件,如下所示:

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

注意:我已经改变了这个解决方案,click而不是mouseup像以后在事件管道中那样,并且根据@Jocie的评论似乎在firefox中引起了一些问题

某些浏览器尝试在mouseup或click事件期间定位光标.这是有道理的,因为您可能希望在一个位置启动插入符并拖动以突出显示某些文本.在实际抬起鼠标之前,它无法指定插入位置.所以处理的函数focus命中注定要过早响应,让浏览器覆盖你的定位.

但问题是我们真的想要处理焦点事件.它让我们知道有人第一次进入该领域.在那之后,我们不希望继续覆盖用户选择行为.

解决方案:

相反,在focus事件处理程序中,我们可以快速连接将要触发的click(click in)和keyup(tab in)事件的侦听器.

注意:tab事件的keyup实际上将在新输入字段中触发,而不是在前一个字段中触发

我们只想开火一次.我们可以使用.one("click keyup),但是这会为每个事件类型调用一次事件处理程序.相反,只要按下mouseup或keyup,我们就会调用我们的函数.我们要做的第一件事就是删除两者的处理程序.这样,无论我们是选项卡还是鼠标都没关系.函数应该只执行一次.

注意:大多数浏览器在选项卡事件期间自然选择所有文本,但正如animatedgif指出的那样,我们仍然希望处理keyup事件,否则mouseup事件仍然会在我们选中的任何时候挥之不去.我们听两个以便我们可以转我们处理完选择后立即关闭听众.

现在,我们可以select()在浏览器进行选择后调用,以便我们确保覆盖默认行为.

最后,为了获得额外的保护,我们可以向和函数添加事件命名空间,这样该方法就不会删除任何可能正在运行的其他侦听器.mouseupkeyup.off()

在IE 10 +,FF 28+和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 6

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

$("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 7

此版本适用于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 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如果该字段当前没有焦点,则代码将有条件地阻止默认行为.它适用于以下情况:

• 字段未聚焦时单击
• 当字段具有焦点时单击
• 进入该领域

我在Chrome 31,FF 26和IE 11中测试了这个.