HTML textbox input- Always select all text on click

Question

How do I achieve the following behavior in an html text input: when a user clicks the input, all the text will be selected, even if it's already selected. Thus there won't be any possibility to delete/select certain characters.

currently I have the following:

elm.on('click', function(e) {
    e.preventDefault();
    $(this).select();
});

but if the text is selected then a click displays a carret.

score 2 · Accepted Answer · answered Jan 20 '16 at 18:50

2

This was a fun one!

The trick is not to preventDefault() on the click event, but instead the mouseDown event.

$('#clickme').on('mousedown', function(e) {
  e = e || window.event;
  e.preventDefault();
  $(this).select();
});

Here's a working fiddle and the related question I got the answer from

answered Jan 20 '16 at 18:50

willcwf

712
7
10

Have you tried this on a mobile device? To select it in Chrome for Android, you have to tap the input, then tap away from the input, then tap it again. – rybo111 Jan 21 '16 at 09:11

rybo111 · Answer 2 · 2016-01-20T16:36:18.887

1

Thus there won't be any possibility to delete/select certain characters.

For this, I recommend using readonly on your input:

<input readonly type="text" ...

Also, if you remove e.preventDefault() it will continue to stay selected.

See this fiddle: https://jsfiddle.net/dgryhdtL/

Update

Sometimes when you click selected text, it will de-select. To get around that, you need to create a small delay:

var that = $(this);
setTimeout(function(){
  that.select();
}, 100);

See this fiddle: https://jsfiddle.net/dgryhdtL/1/

edited Jan 20 '16 at 16:36

answered Jan 20 '16 at 16:17

rybo111

12,240
4
61
70

tnx that was great, but the timeout seems as a code smell, so I went with willcwf's answer – Nir Smadar Jan 21 '16 at 08:43
1

@NirSmadar his code doesn't work for me on Chrome for Android. – rybo111 Jan 21 '16 at 09:04
@rybo1114 tnx, i dont need mobile support – Nir Smadar Jan 21 '16 at 13:49

Kamal Singh · Answer 3 · 2016-01-20T16:48:41.833

0

Here is simple code:

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

Edit: If you have your element already in elm variable than you do not need to write jQuery selector. You can use:

elm.on("click", function () {
    //select the text in text field
    $(this).select();
});

edited Jan 20 '16 at 16:48

answered Jan 20 '16 at 16:20

Kamal Singh

990
8
13

He already has that code. `elm` will be the element he has selected in a previous line. – rybo111 Jan 20 '16 at 16:23
OK? You haven't contributed anything to the code in the first post. – rybo111 Jan 20 '16 at 16:42
Your answer and subsequent edits make no attempt to answer the question. Read the question. It has nothing to do with how to select the element. – rybo111 Jan 20 '16 at 17:00

HTML textbox input- Always select all text on click

3 Answers3

Update