search

Home >Web Front-end >CSS Tutorial >How to set text to be non-editable in css

How to set text to be non-editable in css

藏色散人
藏色散人Original
2021-01-11 09:16:552630browse

How to set the text to be non-editable in css: 1. Set the text to be non-editable through the "οnfοcus=this.blur()" method; 2. Use the readonly attribute to set the input field to read-only; 3. Use the disabled attribute to set it Just disable the input element.

How to set text to be non-editable in css

The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Recommendation: css video tutorial

Method to set text to be non-editable

Method 1: οnfοcus=this.blur( ) Leave the focus when the mouse cannot be placed 

<input type="text" name="input1" value="（）" onfocus=this.blur()>

Method 2: Use the readonly attribute

Use the readonly attribute to specify that the input field is read-only and non-editable: 

<html>
<body>
<form action="/example/html/form_action.asp" method="get">
  
  <p>Name:<input type="text" name="email" /></p>
  <p>Country:<input type="text" name="country" value="China" readonly="true" /></p>
  
  <input type="submit" value="Submit" />
</form>
</body>
</html>

Rendering ：

How to set text to be non-editable in css

##Method 3: Use the disabled attribute

Use the disabled attribute to specify that the input element should be disabled to make it uneditable

Description:

disabled attribute:

disabled attribute specifies that input should be disabled element.

A disabled input element is neither available nor clickable. The disabled attribute can be set until some other condition is met (such as a checkbox being selected, etc.). Then, you need to use JavaScript to remove the disabled value and switch the value of the input element to available.

readonly attribute: The

readonly attribute specifies that the input field is read-only.

Read-only fields cannot be modified. However, users can still tab to the field and select or copy its text.

The readonly attribute prevents users from modifying the value until certain conditions are met (such as a checkbox being selected). Then, you need to use JavaScript to eliminate the readonly value and switch the input field to an editable state.

The readonly attribute can be used with or .

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

JavaScript html5 css css3 this input
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to make consecutive numbers and letters wrap in cssNext article：How to make consecutive numbers and letters wrap in css

Related articles

See more