Disallowing selection on input text field

Question

Disallowing selection on input text field

I am seeking to disable selection on an input field while still allowing for focusing, with the following criteria:

Preventing selection via mouse
Preventing selection via keyboard (including Ctrl+A, shift+arrows)
Permitting focus on the field using both keyboard and mouse

My attempts so far have included:

CSS

I have tried applying the following class:

.unselectable {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Outcome: Selection is still possible.

I have also experimented with the below code without success:

$("#my_field").attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', 
           '-webkit-user-select':'none',
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

Javascript

I attempted the following:

$( "#my_field" ).select(function(e) {
        console.log("Select called");
        e.preventDefault();
});

Outcome: The message was printed in the console, but selection still occurred.

Thank you for any assistance provided.

javascript css

Answer 1

Answer №1

To achieve this, simply set the selectionStart of the element equal to its selectionEnd when the select event is triggered:

var input = document.getElementById('my_input');

input.addEventListener('select', function() {
  this.selectionStart = this.selectionEnd;
}, false);

<input id="my_input" type="text" value="Click here to select text" />

Answer 2

To achieve this, simply set the selectionStart of the element equal to its selectionEnd when the select event is triggered:

var input = document.getElementById('my_input');

input.addEventListener('select', function() {
  this.selectionStart = this.selectionEnd;
}, false);

<input id="my_input" type="text" value="Click here to select text" />

Answer 3

Answer №2

To overlay the <input> with a layer in absolute position, you can use div.wrapper::after or another wrapper tag. Then apply user-select: none to the wrapper tag (<div>, <label>, etc) and avoid using user-select: none directly on the <input>.

If your wrapper tag is <label>, it's recommended to also add the readonly attribute to the <input> and convert the <label> to block display (or inline-block / flex / inline-flex).

input { outline: none; margin: 10px 0; width: 200px; }

.wrapper {
  position: relative;
  user-select: none;
}

.wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

label.wrapper { display: block; }

<div class="wrapper">
  <input type="text" value="Any text in the div wrapper"/>
</div>

<label class="wrapper">
  <input type="text" value="Any text in the label wrapper" readonly />
</label>

Answer 4

To overlay the <input> with a layer in absolute position, you can use div.wrapper::after or another wrapper tag. Then apply user-select: none to the wrapper tag (<div>, <label>, etc) and avoid using user-select: none directly on the <input>.

If your wrapper tag is <label>, it's recommended to also add the readonly attribute to the <input> and convert the <label> to block display (or inline-block / flex / inline-flex).

input { outline: none; margin: 10px 0; width: 200px; }

.wrapper {
  position: relative;
  user-select: none;
}

.wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

label.wrapper { display: block; }

<div class="wrapper">
  <input type="text" value="Any text in the div wrapper"/>
</div>

<label class="wrapper">
  <input type="text" value="Any text in the label wrapper" readonly />
</label>

Answer 5

Answer №3

If you want to prevent the mousedown event from allowing text selection within an input element, you can use the following code:

<input type="text" id="unselectable" value="You can not select this text!"/>
<script>
document.getElementById("unselectable").addEventListener("mousedown", function(event){
  event.preventDefault();
});
</script>

Answer 6

If you want to prevent the mousedown event from allowing text selection within an input element, you can use the following code:

<input type="text" id="unselectable" value="You can not select this text!"/>
<script>
document.getElementById("unselectable").addEventListener("mousedown", function(event){
  event.preventDefault();
});
</script>

Answer 7

Answer №4

Solution using only CSS:

This method does not visually show the selected text in an input field while still allowing it to be selected.
In some cases, this approach may suffice if the focus is on the visual appearance of the selection rather than its functionality.

input{ color:transparent }
input::selection{ color:transparent }

<input value='invisible selection'>

Another option is to use font-size:0 along with defining the width and height for the input element.

Alternative Solution using JavaScript:

Force the input to lose focus when it gains focus by triggering the blur method:

<input value='unselectable selection' onfocus='this.blur()'>

Answer 8

Solution using only CSS:

This method does not visually show the selected text in an input field while still allowing it to be selected.
In some cases, this approach may suffice if the focus is on the visual appearance of the selection rather than its functionality.

input{ color:transparent }
input::selection{ color:transparent }

<input value='invisible selection'>

Another option is to use font-size:0 along with defining the width and height for the input element.

Alternative Solution using JavaScript:

Force the input to lose focus when it gains focus by triggering the blur method:

<input value='unselectable selection' onfocus='this.blur()'>

Answer 9

Answer №5

Here is the answer for adding a pointer icon to your cursor.

.selection-box {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.selection-box::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="selection-box">
  <input type="text" value="click here"/>
</div>

Answer 10

Here is the answer for adding a pointer icon to your cursor.

.selection-box {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.selection-box::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="selection-box">
  <input type="text" value="click here"/>
</div>

Disallowing selection on input text field

Answer №1

Answer №2

Answer №3

Answer №4

Solution using only CSS:

Alternative Solution using JavaScript:

Answer №5

Similar questions

Attaching a click event to an input field

Change the font style of individual characters within a string using CSS or JavaScript, instead of applying it to the entire

Is it possible to alter CSS attributes dynamically without setting a limit on the number of changes that can be made?

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

What are some ways to prevent having to constantly check for the existence of an object within another object when working

The issue arises when the export function is triggered within the getStaticPaths() method, preventing the top-level

Issues with the functionality of the sliding menu in Angular are being encountered when trying to use $

Creating a responsive carousel that is not yet designed

How can I stop jQuery mobile from updating the document title?

Ensure the placeholder remains front and center, growing in size as it moves vertically

Is it possible to eliminate the css class prefix when using Modular css in React?

Upon attempting to start the server, the module 'express-stormpath' could not be located

Keystroke to activate Ant Design Select and start searching

Tips for sending the ampersand character (&) as a parameter in an AngularJS resource

The useRef() hook call in NextJs is deemed invalid

Performing calculations within handsontable

What is the best method for incorporating a YouTube embedded video into an image carousel using HTML and CSS?

Developing an export feature for a mean application

Clicking activates Semantic UI's dropdown function with the onClick method

Adding information to a single class that shares a common name