One cannot focus on HTML if it's disabled

I am currently exploring options to prevent an input from receiving focus without disabling it entirely. I need the backend to still retrieve data, but I want to restrict user editing of the input fields at certain times. Disabling the input is not an option since it prevents data from being sent back to the backend. What I am doing now is removing the disabled attribute when the user submits the form, but this momentarily makes the inputs look normal before the next page loads. Any suggestions on a better approach would be appreciated. (My next step will be adding the 

background-color: #F2F2F2 !important;
color: #C6C6C6;
border-color: #ddd;

However, different browsers handle this differently, so I prefer a solution that does not exhibit this behavior.

jqueryhtmlcss

Answer №1

Deactivate the input field and include an additional hidden input with identical name

Answer №2

To prevent a user from focusing on an input field, you can intercept the onfocus event and trigger a blur() event instead. This way, the input will lose focus immediately.

​document.getElementById('input').onfocus = function() { this.blur(); }​​​​​

Check out this example
http://jsfiddle.net/HkbTH/

Answer №3

Using the attribute readonly is recommended for situations like this.

<input type="text" name="bar" readonly>
<input type="text" name="bar" readonly="readonly"/> <!-- This is the XHTML syntax -->

document.getElementsByName('bar')[0].readonly= true;

A field marked as readonly can still be focused by the user, allowing them to select and copy text from it. However, the field cannot be edited, and it may appear visually disabled.

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

Retrieving an array from the $.get() method within multiple nested loops

I'm currently working on a jQuery plugin that takes an array of JSON files and needs to compile them into one large array. While each part of the code works individually, I'm facing issues when trying to integrate them together and return the ne ...

javascriptjqueryjsonasynchronous

The statusText variable for getXMLHTTP object is not found when the status is not equal to

Earlier, I posted about this issue before isolating the problem. Now that I have isolated it, I wanted to repost with a clearer focus on the two functions causing the problem. Whenever I update my State, it triggers the getCity function. The call is being ...

phpjavascriptajaxhtmlmysqli

Preserving user session information using JavaScript, or an equivalent method

My goal is to implement a basic back function for users. They enter the Girls listing, which displays a location screen. Upon selecting a location, AJAX is used to replace the locations with images of girls from that specific area. If a user clicks on a gi ...

phpjqueryajaxsessionback

Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

For my current project, I am creating an offline website and would like it to display in full screen when opened. I have been using the Fullscreen API, but it exits fullscreen mode when a user navigates to another page. After researching the issue, it seem ...

javascriptjquerycsshtmlfullscreen

What is the best way to make an HTML element's width automatically adjust based on the margin size?

I'm currently working on creating a rectangular button using HTML and CSS. The challenge I'm facing is ensuring that the width of the button remains consistent regardless of the amount of text it contains. Whether it's just a few words or mu ...

htmlcss

Animating multiple elements in Angular 2 using a single function

Currently, I am delving into Angular and faced a challenge while attempting to create a toggle categories menu. Within my navbar component, I have an animation trigger set up as follows: trigger('slideCategory', [ state('opened&apo ...

htmlangulartypescriptevent-handlingfrontend

Incorporate JavaScript strings into HTML dynamically

I am facing some challenges with single quotes while trying to append HTML with a JavaScript string. So far, I have managed to successfully append the element: $("<a class='action-button' id='pl65197buy' value='buy now'&g ...

javascriptjqueryhtml

Learn how to use Angular2 or TypeScript to display 'unsubscribe' and 'subscribe' text on a toggle button

I'm working on a toggle button that initially displays the word subscribe on the thumb. When the toggle is disabled, I want it to show unsubscribe instead. Can someone please help me achieve this functionality? Here's the code snippet: <md-s ...

javascripthtmlcssangulartypescript

Switch the jQuery overlay image upon clicking a button

Is there a way to dynamically change the overlay image of a jQuery-ui dialog using a button click from inside the dialog? I attempted to do so in the code snippet below, but unfortunately, the overlay image does not update. It seems that I need to manipu ...

javascriptjqueryjquery-ui

Is it possible to customize the font color of a placeholder in a v-text-field component in Vue?

Recently, I added the following code snippet to my project: <v-text-field hide-details class="search-field" id="name-input" placeholder="Search by name" v-model="search"></v-text-field> I wanted to change the font color of the placeholder tex ...

javascripthtmlcssvue.jsvuetify.js

What is causing the newly generated input tags to disappear from the page?

I'm having an issue where my code successfully creates new input tags based on user input, but they disappear shortly after being generated. What could be causing this to happen? <form> <input type='text' id='input' /> ...

javascriptjqueryhtml

"Optimizing App Pool Performance with IIS Precache Event Monitoring

Our asp.net LOB web application is quite large. The issue we are facing is the delay of up to 10 seconds when the app pool is started or recycled, making the first page load slow. This results in users seeing a white page with a loading spinner until IIS ...

htmlasp.netasp.net-mvciisiis-7

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

htmlcss

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

<body> <div class="content"> <div class="content-sidebar"> content-sidebar </div> <div class="content-main"> content-main </div> ...

csscss-floatoverflow

A growing flexbox container that expands to a specific height before allowing for scrolling

In the case of a fixed height container with two vertical divs, I am aiming for the first div to be as tall as its content, up to 80% of the parent div's height. After that point, the content within the first div should scroll. The second div will the ...

htmlcssflexboxoverflow

Div Randomly Transforms Its Vertical Position

After successfully creating a VS Code Extension for code completion, I decided to develop a website as a landing page where users can sign up and customize their extension settings. The editor I built pops up first on the page seemed to be working fine in ...

javascripthtmljquerycss

Can you explain the significance of this %s value?

While going through some code, I found this: form method='post' input type='hidden' name='input' value='%s' I'm puzzled about the meaning of %s. I attempted to search online for an answer but couldn't fin ...

phphtml

Customize Your Wordpress Category Title with a Background Image

Within my wordpress template, there is a module known as new_boxs. The code snippet below shows that this module displays on the page six times, with two columns wide and three rows down: foreach($data_cat as $cat){ ?> <div class="span6"> ...

phpcsswordpress

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

javascripthtmlcssreactjs

Why isn't the jQuery colorbox popup appearing when triggered by the $.ajax() function?

I am currently facing an issue where I am trying to display a hidden colorbox popup using the $.ajax() method's success function, but it is not showing up. Interestingly, this had worked fine in a previous implementation where I used the data attribut ...

javascriptajaxjquerycolorbox