Controlling Input Field Editability with HTML and JavaScript

Introduction

Web forms rely on <input> elements to collect user data. Sometimes, you need to display data in an input field that the user can see but not directly edit. This is a common requirement for pre-filling information, displaying calculated values, or presenting read-only data within a form. This tutorial covers the best practices for making input fields read-only using HTML attributes and JavaScript, specifically with the jQuery library.

HTML readonly Attribute

The simplest way to make an input field read-only is using the readonly attribute directly in your HTML. When present, this attribute prevents the user from modifying the input’s value.

<input type="text" value="This is read-only" readonly>

This will render a text input where the user can see the value but cannot type into it. The input will typically be visually indicated as disabled (e.g., grayed out), though styling can be used to customize this appearance.

Using JavaScript to Dynamically Control Readonly Status

Often, you’ll need to control the read-only status of an input field dynamically, based on user interactions or other application logic. JavaScript provides a way to modify HTML attributes. However, there’s a distinction to understand regarding how attributes are handled in modern JavaScript libraries like jQuery.

attr() vs. prop() in jQuery

jQuery provides two primary methods for manipulating HTML elements: attr() and prop(). Historically, attr() was used for everything. However, modern best practice encourages using prop() for boolean attributes like readonly, disabled, and checked, and attr() for string-based attributes.

• attr(): Gets or sets the value of an attribute. For the readonly attribute, this effectively checks for the presence of the attribute, or adds/removes it with a given string value (e.g., readonly="readonly").
• prop(): Gets or sets the property of an element. For boolean attributes, this directly sets the underlying JavaScript property, which is the preferred method for consistency and to avoid potential issues.

Here’s how to use both methods to set and remove the readonly attribute with jQuery:

Setting the readonly attribute:

// Using prop() (Recommended)
$('#myInput').prop('readonly', true);

// Using attr()
$('#myInput').attr('readonly', 'readonly'); // or any non-empty string

Removing the readonly attribute:

// Using prop() (Recommended)
$('#myInput').prop('readonly', false);

// Using attr()
$('#myInput').removeAttr('readonly');

Important Consideration: jQuery Version

Prior to jQuery 1.9, prop() wasn’t fully implemented, and attr() worked for boolean attributes. However, starting with jQuery 1.9, prop() became the preferred and more reliable method for managing boolean attributes like readonly. It’s best practice to use prop() for consistency and to ensure your code works correctly across different jQuery versions.

Vanilla JavaScript Approach

If you’re not using jQuery, you can achieve the same results using vanilla JavaScript:

// Setting the readonly attribute
document.getElementById("myInput").readOnly = true;

// Removing the readonly attribute
document.getElementById("myInput").readOnly = false;

This directly sets the readOnly property of the input element.

disabled vs. readonly

It’s important to distinguish between readonly and disabled attributes. While both prevent user input, they have different implications:

• readonly: The input is visually enabled, and its value is submitted with the form.
• disabled: The input is visually disabled (typically grayed out and unclickable), and its value is not submitted with the form.

Choose the appropriate attribute based on whether you want the value to be included in the form submission. If you want the user to see a value, but don’t want it to be sent as part of the form data, use disabled. If you want the value to be submitted, use readonly.