jquery input select all on focus
JqueryInputJquery Problem Overview
I'm using this code to try and select all of the text in the field when a user focuses on the field. What happens is, it selects all for a second, then its unselected and the typing cursor is left where I clicked...
$("input[type=text]").focus(function() {
$(this).select();
});
I want it all to remain selected.
Jquery Solutions
Solution 1 - Jquery
Try using click
instead of focus
. It seems to work for both mouse and key events (at least on Chrome/Mac):
jQuery < version 1.7:
$("input[type='text']").click(function () {
$(this).select();
});
jQuery version 1.7+:
$("input[type='text']").on("click", function () {
$(this).select();
});
Solution 2 - Jquery
I think that what happens is this:
focus()
UI tasks related to pre-focus
callbacks
select()
UI tasks related to focus (which unselect again)
A workaround may be calling the select() asynchronously, so that it runs completely after focus():
$("input[type=text]").focus(function() {
var save_this = $(this);
window.setTimeout (function(){
save_this.select();
},100);
});
Solution 3 - Jquery
I think this is better solution. Unlike simply selecting in onclick event, it doesn't prevent selecting/editing text with mouse. It works with major rendering engines including IE8.
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
Solution 4 - Jquery
There are some decent answers here and @user2072367 's is my favorite, but it has an unexpected result when you focus via tab rather than via click. ( unexpected result: to select text normally after focus via tab, you must click one additional time )
This fiddle fixes that small bug and additionally stores $(this) in a variable to avoid redundant DOM selection. Check it out! (:
Tested in 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();
});
Solution 5 - Jquery
After careful review, I propose this as a far cleaner solution within this thread:
$("input").focus(function(){
$(this).on("click.a keyup.a", function(e){
$(this).off("click.a keyup.a").select();
});
});
Demo in jsFiddle
The Problem:
Here's a little bit of explanation:
First, let's take a look at the order of events when you mouse or tab into a field.
We can log all the relevant events like this:
$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
function(e) { console.log(e.type); });
>Note: I've changed this solution to use click
rather than mouseup
as it happens later in the event pipeline and seemed to be causing some issues in firefox as per @Jocie's comment
Some browsers attempt to position the cursor during the mouseup
or click
events. This makes sense since you might want to start the caret in one position and drag over to highlight some text. It can't make a designation about the caret position until you have actually lifted the mouse. So functions that handle focus
are fated to respond too early, leaving the browser to override your positioning.
But the rub is that we really do want to handle the focus event. It lets us know the first time that someone has entered the field. After that point, we don't want to continue to override user selection behavior.
The Solution:
Instead, within the focus
event handler, we can quickly attach listeners for the click
(click in) and keyup
(tab in) events that are about to fire.
> Note: The keyup of a tab event will actually fire in the new input field, not the previous one
We only want to fire the event once. We could use .one("click keyup)
, but this would call the event handler once for each event type. Instead, as soon as either mouseup or keyup is pressed we'll call our function. The first thing we'll do, is remove the handlers for both. That way it won't matter whether we tabbed or moused in. The function should execute exactly once.
> Note: Most browsers naturally select all text during a tab event, but as animatedgif pointed out, we still want to handle the keyup
event, otherwise the mouseup
event will still be lingering around anytime we've tabbed in. We listen to both so we can turn off the listeners as soon as we've processed the selection.
Now, we can call select()
after the browser has made its selection so we're sure to override the default behavior.
Finally, for extra protection, we can add event namespaces to the mouseup
and keyup
functions so the .off()
method doesn't remove any other listeners that might be in play.
Tested in IE 10+, FF 28+, & Chrome 35+
Alternatively, if you want to extend jQuery with a function called once
that will fire exactly once for any number of events:
$.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);
});
};
Then you can simplify the code further like this:
$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});
Demo in fiddle
Solution 6 - Jquery
This would do the work and avoid the issue that you can no longer select part of the text by mouse.
$("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");
}
});
Solution 7 - Jquery
The problem with most of these solutions is that they do not work correctly when changing the cursor position within the input field.
The onmouseup
event changes the cursor position within the field, which is fired after onfocus
(at least within Chrome and FF). If you unconditionally discard the mouseup
then the user cannot change the cursor position with the mouse.
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"));
The code will conditionally prevent the mouseup
default behaviour if the field does not currently have focus. It works for these cases:
- clicking when field is not focused
- clicking when field has focus
- tabbing into the field
I have tested this within Chrome 31, FF 26 and IE 11.
Solution 8 - Jquery
This version works on ios and also fixes standard drag-to-select on 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();
}
}
});
Solution 9 - Jquery
Found a awesome solution reading this thread
$(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);
});
}
});
Solution 10 - Jquery
I'm coming from late 2016 and this code just works in recent versions of jquery (jquery-2.1.3.js in this case).
if ($(element).is("input")) {
$(element).focus(function () {
$(element).select();
});
}
Solution 11 - Jquery
I always use requestAnimationFrame()
to jump over internal post-event mechanisms and this works perfectly in Firefox. Haven't tested in Chrome.
$("input[type=text]").on('focus', function() {
requestAnimationFrame(() => $(this).select());
});
Solution 12 - Jquery
i using FF 16.0.2 and jquery 1.8.3, all the code in the answer didn't work.
I use code like this and work.
$("input[type=text]").focus().select();
Solution 13 - Jquery
Or you can just use <input onclick="select()">
Works perfect.
Solution 14 - Jquery
var timeOutSelect;
$("input[type=text]").focus(function() {
var save_this = $(this);
clearTimeout(timeOutSelect);
timeOutSelect = window.setTimeout (function(){
save_this.select();
}, 100);
});
Use clearTimeout for more security if you switch quickly between two input.. clearTimeout clean the old timeout...
Solution 15 - Jquery
Works great with the native JavaScript select()
.
$("input[type=text]").focus(function(event) {
event.currentTarget.select();
});
or in general:
$("input[type=text]")[0].select()
Solution 16 - Jquery
You can use simple code:
$('#idname').select();
Solution 17 - Jquery
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>