Select text in input field

Question

I am going in circles here. Thought I could fix this issue asked a question earlier answered it only to get stuck again. Have a simple form with multiple panels containing text and numeric input field. When a user clicks in tabs in or whatever the content of that input field text should be selected. I've started looking at THIS article and also looking at the jquery focus and select. Nothing seems to be working. When clicking in the input field nothing seems to be highlighting the text already there.

Thanks

Here are a few things I've tried :

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

$('#itemPanel :input[type="text"]').each(function() {
  $(this).click(function() {
    console.log("I was clicked in");
  });
});

by "should be highlighted" do you mean it should be selected? — filype, Jun 06 '16 at 00:50
try this answer: http://stackoverflow.com/questions/3380458/looking-for-a-better-workaround-to-chrome-select-on-focus-bug — pathfinder, Jun 06 '16 at 00:52

filype · Answer 1 · 2016-06-06T01:08:39.497

0

To autoselect the text in the input box I would recommend using clickevent instead of the focus event in your example.

This also seems to be written in the code example link you posted. http://www.electrictoolbox.com/jquery-select-function/ (Notice how it's using click instead of focus)

Try this:

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

--EDIT

Based on some feedback in the comments, there's a link to another similar question that suggests something like this:

$('input[type=text]').focus(function() {
  $('input[type=text]').select().one('mouseup', function(e) {
    e.preventDefault();
  });
});

edited Jun 06 '16 at 01:08

answered Jun 06 '16 at 00:51

filype

8,034
10
40
66

Apparently that makes it very hard to unselect if you click it selects again. Here is an answer that deals with that: http://stackoverflow.com/questions/3380458/looking-for-a-better-workaround-to-chrome-select-on-focus-bug – pathfinder Jun 06 '16 at 00:55
Yes originally I had started with the click event but that didnt work. Then I put it in an angular.element(document).ready() fucntion but that didnt work either – Troy Bryant Jun 06 '16 at 01:05
Maybe something like it's suggested in here would work? http://stackoverflow.com/a/3380493/280842 – filype Jun 06 '16 at 01:07

score 0 · Accepted Answer · answered Jun 06 '16 at 01:32

0

How about using on focus

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

You can also use mouseup

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

Fiddle

answered Jun 06 '16 at 01:32

Polynomial Proton

5,020
20
37

Select text in input field

2 Answers2