Prevent users from selecting content within input controls using CSS

I'm looking to prevent users from selecting the content of an input control via CSS. I've tried adding the following attributes to the control:

#editContainer
{
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
}

<div id='editContainer'>
    <input id='daysInput' />
    <span id='daysString'></span>
    <input id='hoursInput' />
    <span>:</span>
    <input id='minuteInput' />
</div>

Despite my efforts, it doesn't seem to be working...

Can anyone offer a solution to prevent users from selecting content within the controls?

jqueryhtmlcss

Answer №1

To achieve the desired effect, make sure to include the following CSS properties:

-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none;
user-select: none;' 
unselectable: 'on'  
onselectstart: 'return false;'  
onmousedown: 'return false;'

Here's an example of how to implement it in your code:

<input style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;' unselectable: 'on' onselectstart: 'return false;' onmousedown: 'return false;' id='daysInput' />

Answer №2

If text input fields are currently being used for editing, you won't be able to perform this action.

For this function to work, the attribute must be set to disabled="disabled".

<div id='editContainer'>
    <input id='daysInput' disabled="disabled" value="Test"/>
     <span id='daysString'></span>
     <input id='hoursInput'  disabled="disabled" value="Test"/>
     <span>:</span>
     <input id='minuteInput'  disabled="disabled" value="Test"/>
</div>

Take a look at this demonstration: http://jsfiddle.net/ce7st2ms/7/

Answer №3

It seems challenging to find a satisfactory solution to this issue.

One potential approach using (JavaScript) involves utilizing multiple elements with absolutely positioned elements. The topmost element, whether it be a div or another type of element, should have the same dimensions as the input field to prevent selection.

If you need to input data into the field, you can temporarily hide this element and reveal it again once the input process is complete.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with PHP Mail Forms not functioning as intended

I've been struggling for hours trying to figure this out. I'm new to PHP mail form coding and any assistance would be greatly appreciated! Below are two images: one of the HTML code and one of the PHP code. It seems like a simple setup, but even ...

phphtmlformsemail

Updating choices in dropdown list depending on the selected options in another dropdown list

Is there a way to dynamically change the options in a second dropdown based on the selection made in the first dropdown using jQuery? <select id="Manage"> <option value="a">A</option> <option value="b">B</option> < ...

htmljqueryhtml-select

Create a border around the text using a strokeoutline

I'm attempting to apply an outline to text using CSS. The issue I'm facing is that the shadow doesn't work well for perfectly stroked text. Is there a way to achieve this with just CSS? Below is the code snippet I am currently using: . ...

htmlcss

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

javascriptjqueryhtmlcss

Retrieve age from date of birth using jQuery and show hidden cells

I need assistance with a user form where I want jQuery to calculate their age when they enter their Date of Birth, and if they are over 35 years old, display a hidden div. Here is the code I have put together so far: $(document).ready(function() { $ ...

jquery

Mastering the ngIf Directive in Angular: A Comprehensive Guide

Before you approve and publish, please take note: You are about to give your approval for the Industry Formile Deliverable. The content will be rendered when the specified condition is met. div class="form-group" ...

htmlangular

iOS 8 requires the use of a numeric keyboard for entering passwords

Is there a way to ensure that iOS displays a numeric keyboard for my password field? Currently, I am utilizing the following code: <input type="password" pattern="\d*" name="pass"/> This method was effective in iOS7, however, it seems that the ...

htmliosmobilekeyboardios8

View is unable to trigger the success attribute

Currently, I am delving deep into Backbone JS and facing an issue where the 'success' function in 'EditUser' is not being triggered. I would greatly appreciate it if someone could guide me on what changes I need to make in the code? B ...

javajavascriptjqueryrestbackbone.js

Is there a way to restrict the types of messages that users can set in Node.js?

I recently started developing a multiplayer game and made the decision to incorporate NodeJS into the system. NodeJS is connected to my C# game emulator via TCP. My current challenge is figuring out how to send messages to specific user IDs. Each user in ...

c#javascriptjquerynode.js

PHP/HTML Contact Form that sends messages to a designated email address depending on the option selected in

UPDATED: I recently created a contact form using HTML/PHP. I want to enhance user experience by allowing them to choose a specific department from a dropdown menu and have their email routed directly to that department's designated email address. My ...

phpjqueryhtmlemailcontact-form

Tips on utilizing Blazorise's numeric edit group with grouping functionality

I recently attempted to utilize the numeric edit group separating attribute in Blazorise but encountered issues. According to the documentation, it should be possible to use this feature, however, my attempts were unsuccessful. I would greatly appreciate ...

c#htmlbootstrap-4blazorise

Is jquery.validate necessary for Unobtrusive validation in .NET 4.5?

Currently, I am developing a project using ASP.NET web forms and I am a bit unsure about which jQuery libraries are required for the .NET 4.5 unobtrusive validation. Some sources suggest that I need to include just jquery, while others recommend adding j ...

jqueryasp.net

The issue with footable's removeClass function not functioning properly on an extended row was

Footable is used for a mail inbox, with rows loaded via AJAX and unread mails marked as bold using custom CSS implemented in the JSON on the server side. When expanding a row, the goal is to remove the css-class, achieved through: .on({'expand.ft.row ...

jquerycsswordpresshtml-tablefootable

JavaScript: Issues with Updating Global Variables

I am currently working on a web application that generates a map of the United States and colors it based on financial data from a specified range of years selected using a slider. The functionality involves drawing three maps and having three buttons to ...

javascripthtmlvue.jsnuxt.js

Setting up the default path that appears in the URL

Looking to simplify the URL path on your website? When developing webpages, you may have addresses like: www.example.com/index.html www.example.com/about_us.html www.example.com/en/index.html Is there a way to make these URLs more concise, such as: www ...

javascriptjqueryhtml

Is it possible to make a Javascript AJAX request without using server-side code?

I am currently working on a JavaScript file where I am attempting to make an AJAX call in order to retrieve JSON data. $.ajax({ type: "POST", url: "er.js", // this is the same file data: { action: 'analyzePost&ap ...

javascriptjqueryajaxjson

Remove checkbox in a selected option of a dropdown menu using JQuery

I apologize for the unusual title. Here's what I'm looking for: I have a dropdown menu with several options, and two of them are labeled as "special". If one of these special options is selected, three checkboxes should be disabled or hidden. B ...

jquerycheckboxdrop-down-menuhide

Replace all occurrences of the forward slash character with the value of DS in the variable $uploadTo

What is the significance of DS? $upload_dir = WWW_ROOT.str_replace("/", DS, $uploadTo); ...

phphtml

Menu options disappearing upon clicking within the container area

Every time I click inside the dropdown menus, they unexpectedly close. This issue is persistent in both the Login menu and the nav bar. Although I’m not a seasoned web developer, I suspect it’s just a simple error that I’ve been overlooking all day ...

javascriptjqueryhtmlcss

Utilizing Jquery to manipulate data retrieved via curl

I am working on a project where I am using CURL to populate a div from another HTML page. The data is being populated correctly, but I am now looking to manipulate the IDs or classes of the fetched data using jQuery or JavaScript. I have already tried us ...

javascriptphpjquerycurl