jquery input select all on focus

Question

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

User · Answer

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

User · Answer

Works great with the native JavaScript select        input type text    focus function event       event currentTarget select          or in general      input type text    0  select

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try using click instead of focus  It seems to work for both mouse and key events  at least on Chrome Mac    jQuery  lt  version 1 7      input type  text     click function           this  select          jQuery version 1 7       input type  text     on  click   function           this  select          Here is a demo

User · Answer

You can use simple code       idname   select

User · Answer

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

User · Answer

lt script gt   ready     input type text    attr  onclick     this select       lt script gt

User · Answer

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

User · Answer

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

User · Answer

After careful review  I propose this as a far cleaner solution within this thread     quot input quot   focus function          this  on  quot click a keyup a quot   function e                   this  off  quot click a keyup a quot   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     quot input quot   on  quot mousedown focus mouseup click blur keydown keypress keyup change quot                 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  quot 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    amp  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     quot input quot   focus function          this  once  quot click keyup quot   function e                   this  select                 Demo in fiddle

User · Answer

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          http   jsfiddle net 25Mab 9

User · Answer

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      gt    this  select

User · Answer

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  lt   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

User · Answer

Or you can just use  lt input onclick  select    gt  Works perfect

User · Answer

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

[jquery] jquery input select all on focus

Examples related to jquery

Examples related to input