How to disable an input type=text?

javascript

prompt-engineering

best-practices

security

byAlex Kataev·Oct 11, 2024

To disable an <input type="text">, add the disabled attribute:

<input type="text" disabled>

This makes the field appear grayed out and non-interactable. Yoohoo, your input has now retired! 🎉

In need of more control? Use JavaScript for the job! To disable an input field from JavaScript, set its disabled property to true:

document.getElementById('foo').disabled = true;

The 'disabled' vs 'readOnly' dilemma

What's the difference, and why does it matter? The disabled attribute makes the input field non-editable and excludes it from form submissions. The readOnly attribute, on the other hand, maintains the input field's presence in the form submission, but prevents user-based modifications.

Here how you make an input readonly using JavaScript:

document.getElementById('foo').readOnly = true; // Now it's just a pretty placeholder

How to pick between 'disabled' and 'readOnly'?

You should go for disabled when the user input needs to be entirely inactive and not included in form submissions. On the other hand, readOnly is your guy when the input value should be visible and included in form submission, but not alterable by the user.

Visualising the Input lockdown

Visualising this, a disabled <input type="text"> is akin to locking it. Let's illustrate:

Before: 🔓📝 (Active input, ready for your thoughts)

Apply disabled attribute:

<input type="text" disabled>

Voilà! :

After: 🔒📝 (Input's locked, access denied!)

By simply adding disabled, we've got a lock on the input. No one's getting past that!

Displaying uneditable data? Consider non-input elements

Sometimes using disabled and readOnly inputs for displaying data might not be the best strategy. If an input field is seldom or never going to be enabled, consider using a more straightforward, non-input element such as a <span> or even just a <div>.

This not only ensures the integrity of your data, especially when it's being populated from a database, but it also improves layout stability and makes your intentions clearer to the user.

Style your uneditable fields

Enhance the user experience by styling the disabled or readOnly fields. Here's a quick example of how you can change the background and text color to distinguish these fields:

input[disabled], input[readOnly] {
  background-color: #e0e0e0; // Light grey, because it's retired now
  color: #686868; // Dark grey text just so it doesn't feel left out
}

Similarly, if you're using non-input elements to display uneditable data, its styling should align with the rest of your form or layout. You want them to be clearly readable, yet distinctively identified as non-editable.

Instantly disabling inputs for top-notch security

To ensure secure data handling, especially in sensitivity-laden forms, you might want to disable the input fields as soon as the page loads. This prevents any premature user interactions, increasing your app's security and user experience.

window.onload = function() {
  document.getElementById('foo').disabled = true; // retired on arrival
};

Take care of dynamic data populating your inputs

If your inputs are being populated with dynamic data, such as from a database, make sure to verify the data before applying disabling or read-only states to the elements.

window.onload = function() {
  var myInput = document.getElementById('foo');

  // just like a bouncer checks IDs at the club
  if(/* some condition */) {
    myInput.disabled = true;
  }
};