What does css input not editable mean?

In the front-end development process, the input element is one of the most commonly used form controls. In some special cases, we need to restrict users from modifying the input element. At this time, we usually think of setting the CSS attribute of the input element to achieve this requirement, but in fact, this is not a feasible solution.

In CSS, there are indeed some related properties that can be used to control the behavior and style of input elements, such as the disabled and readonly properties. But these attributes are not essentially modifying the CSS attributes of the input element, but changing the allowed interaction methods to achieve the effect of prohibition or read-only.

We often try to use CSS properties to realize the requirement that the input cannot be edited. For example:

input {
  pointer-events: none;
  user-select: none;
  color: gray;
  background-color: #fafafa;
}

Such CSS code looks very direct, but in fact it is invalid because the CSS style cannot be directly Controls the value in the input element. No matter how you set it up, it can be modified in JavaScript using the value attribute of the input element.

So, why can’t the style and value of the input element be modified directly in CSS? This is related to the characteristics and purpose of the input element.

First of all, the value of the input element should be input by the user or obtained from other sources, and programmers should not forcefully modify it because of their own needs. Therefore, you can only ensure that its value is not modified by setting the disabled or readonly attribute of the input.

At the same time, the input element was given unique semantics from the beginning of the design. In a web page, input is a control used to obtain user input data. The input data will be sent to the background server for processing. If the programmer can directly control the style and value of the input, then some unpredictable risks may occur, such as:

1. Malicious programs may use JavaScript or browser extensions to tamper with the value of the input, thus Submitting inappropriate data in the name of the user;
2. Malicious website attackers may use CSS attacks to hide input data and defraud user information;
3. Maintenance difficulties: when styles and values ​​are modified at the same time Without restrictions, maintaining these input elements will become very difficult.

Therefore, we basically cannot directly modify the value of the input element. However, in some necessary cases, we can still achieve the uneditable state of input through code. Here are several common implementation methods:

1. Use the disabled attribute

The disabled attribute is possessed by the input control itself. Setting it will make the input element gray. and cannot be modified. This is because unavailable controls do not respond to any interaction events, including clicks and keyboard input. This is a very safe and easy to implement method.

<input type="text" id="myInput" disabled>

2. Use the readonly attribute

The readonly attribute is another attribute possessed by the input control itself. Compared with disabled, readonly only makes the input element read-only. , does not change its appearance. This means that you can still use CSS to modify the style of the input element, but you cannot modify its value. However, this property only affects the user, and the value can still be modified using JavaScript or backend code.

<input type="text" id="myInput" readonly>

3. Monitoring using JavaScript

The last method is to use JavaScript to prevent the value of the input element from being modified. After the user inputs, we can use JavaScript to store the input value and disable the input element so that even if the user clicks again, the input element cannot be modified.

<input type="text" id="myInput" onkeyup="storeInputValue(this)" >

<script>
  function storeInputValue(input) {
    input.setAttribute('value', input.value);
    input.setAttribute('disabled', 'disabled');
  }
</script>

In this case, the input element becomes unavailable immediately after entering the value, and the user cannot modify its value again. However, it should be noted that this is not a perfect solution.

Summary

Through the above introduction, we can know that it is invalid to use CSS properties to control the value of the input element to be non-editable. Although we can achieve non-editable effects by setting some properties of the input control itself or using JavaScript to monitor the input. But this must be done carefully, because input elements have extremely important semantics and functions from the beginning of their design, and excessive control of them may have unexpected negative effects.

The above is the detailed content of What does css input not editable mean?. For more information, please follow other related articles on the PHP Chinese website!