How to set input box to be non-editable in jQuery

In a web application, the input box is one of the essential elements. Sometimes we need to display some static text information on the page, but do not allow users to modify it. If the input box is editable, the user can easily change the text content. This article will introduce how to use jQuery to set the input box to be non-editable.

1. Using the readonly attribute

The readonly attribute is an HTML standard attribute, which can set the input box to a read-only state. The user can see the text in the input box but cannot make any changes to it. Just add the readonly attribute to the input box label:

<input type="text" readonly="readonly" value="只读文本" />

In jQuery, you can use the attr() method to set the attribute value of the input box. For example:

// 将class为readOnly的输入框设置为只读状态
$(".readOnly").attr("readonly", "readonly");

2. Using the disabled attribute

The disabled attribute is also an HTML standard attribute, which can set the input box to a disabled state. Unlike the readonly attribute, the disabled attribute disables the input box and the user cannot change the content of the input box by clicking or keyboard input. Just add the disabled attribute to the input box label:

<input type="text" disabled="disabled" value="禁用文本" />

In jQuery, you can use the prop() method to set the attribute value of the input box. For example:

// 将id为disabledInput的输入框设置为不可用状态
$("#disabledInput").prop("disabled", true);

3. Using CSS styles

Using CSS styles is also an effective way to disable input boxes. We can achieve read-only or unavailable status by setting the style of the input box. Among them, setting the background-color, border, cursor, pointer-events and other style attributes of the input box can make the input box look like a read-only state.

/* 只读样式 */
.readOnly {
  background-color: #f5f5f5;
  border: none;
  cursor: default;
  pointer-events: none;
}
/* 不可用样式 */
.disabled {
  background-color: #f5f5f5;
  border: none;
  color: #ccc;
}

Then, in jQuery, you can use the addClass() method and removeClass() method to switch the read-only or unavailable style of the input box:

// 将class为readOnly的输入框添加只读样式
$(".readOnly").addClass("readOnly");
// 将class为disabled的输入框添加不可用样式
$(".disabled").addClass("disabled");

With the above method, we can easily Disable the input box so users cannot change the text content. In actual development, we can choose different methods to achieve the read-only or unavailable state of the input box according to actual needs.

The above is the detailed content of How to set input box to be non-editable in jQuery. For more information, please follow other related articles on the PHP Chinese website!