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

I am struggling to increase the width of my input bar and center-align it

Explore Python and Selenium for implementing pagination with JavaScript functionality

Connect CSS Transition to a click action

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

Problematic Angular 6 Lazy Loading Situation

Build a custom form for the purpose of exporting an HTML file

Retrieve an XML document using AJAX and then convert it to JSON format without needing a server

Adjust the color of text, image, and background when the cursor hovers over

Using Django, CSS, and Javascript, create a dynamic HTML form that shows or hides a text field based on the selection

Determine whether the product is present, and if it is, verify whether the user is included in the array of objects

Chakra UI Not Displaying Proper Responsiveness on the User Interface

Why can I only click on the text of my button?

The handlebar does not undergo any modifications once the authentication process is completed

What is the main file that vue-cli-service utilizes for entry?

Tips on utilizing setInterval in a Vue component

Icons will be displayed when hovered over

JavaScript not functioning properly for the Sibice challenge on Kattis

Protractor's count() function fails to execute properly when called outside of a promise loop

Setting response query correctly in Solr using AJAX

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive