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
Tutorial on installing MySQL with Docker and implementing remote connection
Pull the image docker pull mysql View the complet...
Html Select option How to make the default selection
Adding the attribute selected = "selected&quo...
Vue components dynamic components detailed explanation
Table of contents Summarize Summarize When the ar...
Implement 24+ array methods in JavaScript by hand
Table of contents 1. Traversal Class 1. forEach 2...
CSS uses the placeholder-shown pseudo-class to achieve the floating text effect of the input box
In this post, we’ll use the :placeholder-shown ps...
Summary of several APIs or tips in HTML5 that cannot be missed
In previous blog posts, I have been focusing on so...
How to use axios to filter multiple repeated requests in a project
Table of contents 1. Introduction: In this case, ...
How to configure Nginx to split traffic based on the last segment of the request IP
It is mainly the configuration jump of the if jud...
Installation method of MySQL 5.7.18 decompressed version under Win7x64
Related reading: Solve the problem that the servi...
Examples of using provide and inject in Vue2.0/3.0
Table of contents 1. What is the use of provide/i...
Tutorial on installing Seurat2 and Seurat3 simultaneously using the same version of R in Linux
Seurat is a heavyweight R package for single-cell...
Nodejs module system source code analysis
Table of contents Overview CommonJS Specification...
Detailed explanation of several methods of JS array dimensionality reduction
Dimensionality reduction of two-dimensional array...
Detailed explanation of AWS free server application and network proxy setup tutorial
Table of contents Precautions Necessary condition...
How to implement a simple HTML video player
This article introduces the method of implementin...