Prevent a user from being able to highlight text in a text input field

Question

Prevent a user from being able to highlight text in a text input field

I'm a little baffled as to why this isn't working as expected.

The input I have is being masked successfully, but when the text is selected, it shows the actual value.

To address this issue, I want to prevent users from highlighting the input text. While some may argue that this compromises usability, I am specifically focusing on touchscreens where excessive tapping could lead to unwanted selections.

Although I've tried adding

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

to both inputs, the selection still persists. Are there any alternative methods to achieve this? This is all the information I could gather during my search.

Feel free to experiment with a fiddle of the issue here.

jquery css

Answer 1

Answer №1

If you're looking to achieve this method, consider utilizing pointer-events: none for the lower input and text-indent: -9999px to eliminate the visible text.

Downside

No cursor in the input (although this could potentially be emulated with javascript)

I recommend using:

<input class='value' type="password" />

to prevent selecting the text with ctrl + a and copying it.

Try it out on JSFiddle!

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;
}

Answer 2

If you're looking to achieve this method, consider utilizing pointer-events: none for the lower input and text-indent: -9999px to eliminate the visible text.

Downside

No cursor in the input (although this could potentially be emulated with javascript)

I recommend using:

<input class='value' type="password" />

to prevent selecting the text with ctrl + a and copying it.

Try it out on JSFiddle!

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;
}

Answer 3

Answer №2

To avoid completely disabling text selection, one option is to identify when text has been selected, then either clear the selection or shift focus to a different element.

For more information, please refer to: Detect what is selected (highlighted) or clicked within an element on a page?

Answer 4

To avoid completely disabling text selection, one option is to identify when text has been selected, then either clear the selection or shift focus to a different element.

For more information, please refer to: Detect what is selected (highlighted) or clicked within an element on a page?

Prevent a user from being able to highlight text in a text input field

Answer №1

Answer №2

Similar questions

Trigger Heartbeat Signal on Page Access using jQuery

Darken the entire webpage and gradually fade in a specific div element using Jquery

Exploring the process of dynamically inserting choices into an array of HTML dropdown menus using a combination of Php, AJAX, and jQuery

Enhancing JavaScript Variables Through Dynamic Ajax/PHP Interaction

"Troubleshooting: Why is my Bootstrap modal window only printing a

Ways to retrieve and contrast the border style of an image utilizing javascript

Utilizing Javascript in Owl Carousel 2 to Filter Items While Preserving the Sort Order

Unable to fetch css file in Node.js

The debugging tool couldn't pinpoint the error, which is quite odd

The jQuery UI Tab is failing to scroll within its container

How can I incorporate a custom color into a preset navbar on an HTML webpage?

How can I apply Ben Alman's debounce jQuery function in my code?

Creating a Queue Table with PHP, MySQL, and Ajax in Action

The YYYY-dd-mm input mask pattern is malfunctioning

Obtaining a CSS element again to be utilized for boundary checking purposes

Implementing data updates in Ruby on Rails through AJAX or jQuery

The jQuery Click function is being triggered repeatedly

Using jQuery to select the nth element of a list

Adjust the image's height to adapt to the size of the browser

Supply a variety of values to jQuery