How to make form input and other text boxes read-only and non-editable in HTML
|
Sometimes, we want the text boxes in the form to be read-only so that users cannot modify the information in them, such as making the content of <input type="text" name="input1" value="中国">, the word "中国" cannot be modified. To summarize, there are several ways to implement it. Method 1: onfocus=this.blur() will lose focus when the mouse cannot be placed <input type="text" name="input1" value="中国" onfocus=this.blur()> Method 2: readonly <input type="text" name="input1" value="中国" readonly> <input type="text" name="input1" value="中国" readonly="true"> Method 3: disabled <input type="text" name="input1" value="中国" disabled="true"> Complete example: <input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" /> disabled="true" If this option is enabled, the text will become gray and cannot be edited. readOnly="true" text will not change color and is not editable CSS shielding input: <input style="ime-mode: disabled"> There are two methods: First: disabled="disabled". After this definition, the disabled input element is neither available nor clickable. Second: readonly="readonly" read-only fields cannot be modified. However, users can still use the tab key to switch to the field, and can select or copy its text; |
<<: TortoiseSvn Little Turtle Installation Latest Detailed Graphics Tutorial
>>: Design Theory: Hierarchy in Design
Recommend
MySQL database introduction: detailed explanation of multi-instance configuration method
Table of contents 1. What is multi-instance 2. Pr...
Using keras to judge SQL injection attacks (example explanation)
This article uses the deep learning framework ker...
In MySQL database, datetime, bigint, and timestamp are used to represent time selection. Which one is the most efficient for storing time?
Table of contents # Post-data preparation # SQL q...
A simple example of using Vue3 routing VueRouter4
routing vue-router4 keeps most of the API unchang...
Comparison of CSS shadow effects: drop-Shadow and box-Shadow
Drop-shadow and box-shadow are both CSS propertie...
Summary of Operator Operations That Are Very Error-Prone in JavaScript
Table of contents Arithmetic operators Abnormal s...
VUE+SpringBoot implements paging function
This article mainly introduces how to implement a...
Detailed explanation of how to migrate a MySQL database to another machine
1. First find the Data file on the migration serv...
HTML+CSS3 code to realize the animation effect of the solar system planets
Make an animation of the eight planets in the sol...
Native js to implement drop-down box selection component
This article example shares the specific code of ...
About converting textarea text to html, that is, carriage return and line break
Description: Change the carriage return in the tex...
Analysis of common usage examples of MySQL process functions
This article uses examples to illustrate the comm...
11 common CSS tips and experience collection
1. How do I remove the blank space of a few pixels...
Detailed graphic and text tutorial on downloading, installing and configuring mysql-5.7.28 under Windows
Recently I need to change the version of MySQL da...
Play mp3 or flash player code on the web page
Copy code The code is as follows: <object id=&...