Disabling the Ability to Highlight Text in an Input

Question

I would like to know if there is a way, using jQuery, to disable the text from being highlighted when setting a caret position to the front of the text already in an input box?

In the sample below, place your cursor in the leftmost input box and then press the Tab key. You will notice that when the cursor moves to the next input the text is highlighted when the caret position is changed - this is what I would like to be able to stop.

<input type="text" value="Some text here..." class="populated-text">
<input type="text" value="Any default text you like" class="populated-text">
<input type="text" value="Will be used as empty" class="populated-text">

$('.populated-text').each(function () {
    var input = $(this);
    input.data('blank-value', input.val());
    input.data('data-entered', false);
    input.addClass('grayed');
    input.keydown(keyDown);
    input.blur(blur);
    input.focus(focus);
    input.mousedown(mouse);
    input.mouseup(mouse);
});

Here is a sample: http://jsfiddle.net/t5HMy/

Ram · Accepted Answer · 2012-08-04T07:17:57.480

1

Try this:

$('input').focus(function() {
   var $that = $(this);            
   setTimeout(function() {
       $that.selectRange(0,0); 
   }, 1)
})

DEMO

edited Aug 04 '12 at 07:17

answered Aug 04 '12 at 07:08

Ram

143,282
16
168
197

When i try that i can still select the text by clicking and dragging over – Undefined Aug 04 '12 at 07:27
@Sam, it is okay if the user can still select the text, I just did not want the text to be selected when the user was to Tab to the next input. Here is another example of what I was trying to do (https://squareup.com/) I'm sorry if I should have been a little more specific. – larrylampco Aug 04 '12 at 22:22

score 0 · Answer 2 · edited May 23 '17 at 12:12

See this working jQuery example.

Using jQuery you can cause the blur event when the user tries to focus. This will stop them from inputting text.

$("#elem").focus(function() {
    $(this).blur();
}):

Also using CSS, obviously this may not work with older browsers. You should check out this question.

#elem
{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Disabling the Ability to Highlight Text in an Input

2 Answers2