Disable a user from selecting text in input

Question

I admit I'm a bit stumped why this is not working.

I have an input that I am masking and that is working perfectly, however it seems if you select the text then it 'reveals' the real value.

To solve this, I would like to disable the user from being able to highlight the text in the input. Before you say this is bad usability, I'm working on touchscreens only and this will really just stop it from highlighting if they click too many times.

I have tried putting

-webkit-user-select: none;  
 -moz-user-select: none;    
 -ms-user-select: none;      
 user-select: none;

on both inputs, but it still wants to select. Is there any other way to accomplish this? This is all I could find when searching around.

and here is a fiddle to play with. http://jsfiddle.net/gtom9tvL/1/

misterManSam · Accepted Answer · 2014-08-21 21:25:16Z

2

If you want to do it this way you could make use of pointer-events: none on the lower input and text-indent: -9999px to remove the unmasked text from the viewport.

Drawback

No carat in the input (though this could be simulated with javascript, I guess)

I would use: <input class='value' type="password" /> so that the text can not be selected with ctrl + a and copy pasted.

Have a fiddle!

CSS

.num {
    position: relative;
}
.value {
    text-indent: -9999px;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}
.number {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

edited Aug 21, 2014 at 21:25

answered Aug 21, 2014 at 21:09

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zazvorniki Over a year ago

Thank you! I never even thought of text indent...I guess I only think of that when I'm doing background-images.

Community · Accepted Answer · 2017-05-23 12:05:01Z

0

One way to do this without disabling text selection completely, would be to detect the text selection, then de-select it or set the focus to another element.

See: Detect what is selected (highlighted) or clicked within an element on a page?

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Aug 21, 2014 at 20:42

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

4 Comments

zazvorniki Over a year ago

Te only issue I find with this is that I am handling sensitive data and I don't really want it selecting and revealing those numbers and then deselecting. I do actually have text selecting disabled for most of the app already...it's just this one input that wants to be difficult.

zazvorniki Over a year ago

Also, I kind of need the focus on that element because that is what they are interacting with and there is basically one question per page...so there really is nothing else to focus on.

Diodeus - James MacFarlane Over a year ago

I don't understand how selecting text would "reveal" something that is hidden, unless you're simply putting white-on-white, and that's a poor way to hide something to begin with.

zazvorniki Over a year ago

Take a look at the fiddle I provided and you can see what was happening. I am working with a touch screen so my options are a bit limited to what I can and cannot do also requirements from above make it challenging. If you can think of a better way to mask an input field then I would like to know. When I asked the question here the best anyone could come up with is three separate input fields.

Collectives™ on Stack Overflow

Disable a user from selecting text in input

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related