Home Web Front-end HTML Tutorial How to make text boxes such as form input read-only and non-editable in HTML_HTML/Xhtml_Web page production

How to make text boxes such as form input read-only and non-editable in HTML_HTML/Xhtml_Web page production

May 16, 2016 pm 04:41 PM
input read only

Sometimes, we want the text box in the form to be read-only so that the user cannot modify the information in it. For example, in the content of , the word "China" cannot be modified. To summarize, the implementation methods are as follows.

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


Method 2: readonly



Method 3: disabled


Full example:



disabled="true " The text will turn gray and cannot be edited.
readOnly="true" The text will not change color and is not editable

css shielding input:

There are two The first method: disabled="disabled" is defined so that 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 select or copy its text;

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to modify the Linux fstab file to cancel the read-only attribute How to modify the Linux fstab file to cancel the read-only attribute Jan 15, 2024 pm 05:57 PM

After experimenting with mounting options to prohibit the execution of set bit programs and binary programs [root@localhost~]#vi/etc/fstab/# after adding /dev/sdc1/varext3defaults,noexec12[root@localhost~]#mount-oremount/var After the system restarts, it is found that /dev/sdc1 cannot be entered and can only enter the character interface. I want to delete that line, but when saving the file, it prompts the read-only attribute Read-onlyfilesystem. I have tried using (1) chmod+w/etc/fstab (2):w! The file is still read-only and cannot be modified. Method#

Practical Guide: Implementing table-level read-only permissions in Oracle Practical Guide: Implementing table-level read-only permissions in Oracle Mar 06, 2024 pm 05:09 PM

Implementing table-level read-only permissions in Oracle is a common and important operation in database management. By setting read-only permissions, you can ensure that some users can only query table data but cannot modify it, thus effectively protecting the integrity and security of the data. The following will introduce in detail how to implement table-level read-only permissions in Oracle, as well as specific code examples. Step 1: Create a table First, create a sample table in Oracle to demonstrate how to set table-level read-only permissions. Suppose we create a file called "exampl

How to encapsulate input components and unified form data in vue3 How to encapsulate input components and unified form data in vue3 May 12, 2023 pm 03:58 PM

Preparation Use vuecreateexample to create a project. The parameters are roughly as follows: use native input. Native input is mainly value and change. The data needs to be synchronized when changing. App.tsx is as follows: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//When the input box changes, synchronize the data constonInput=;return( )=>({

How to implement laravel input hidden field How to implement laravel input hidden field Dec 12, 2022 am 10:07 AM

How to implement the laravel input hidden field: 1. Find and open the Blade template file; 2. Use the method_field method in the Blade template to create a hidden field. The creation syntax is "{{ method_field('DELETE') }}".

How to set the disk as read-only with the partition tool diskgenius - How to set the disk as read-only with diskgenius How to set the disk as read-only with the partition tool diskgenius - How to set the disk as read-only with diskgenius Mar 04, 2024 pm 03:00 PM

Friends, do you know how to set the disk as read-only with the partition tool diskgenius? Today I will explain how to set the disk as read-only with the partition tool diskgenius. If you are interested, come and take a look with the editor. I hope it can help you. . Step 1: First, open the DiskGenius software and select the disk that needs to be set. Step 2: Secondly, in the DiskGenius software, open the disk menu. Step 3: Again, as shown in the figure, change the status of this disk to "read-only". Step 4: Finally, confirm this operation to make the disk read-only.

Detailed explanation of input box binding events in Vue documents Detailed explanation of input box binding events in Vue documents Jun 21, 2023 am 08:12 AM

Vue.js is a lightweight JavaScript framework that is easy to use, efficient and flexible. It is one of the most popular front-end frameworks currently. In Vue.js, input box binding events are a very common requirement. This article will introduce the input box binding events in the Vue document in detail. 1. Basic concepts In Vue.js, the input box binding event refers to binding the value of the input box to the data object of the Vue instance, thereby achieving two-way binding of input and response. In Vue.j

What to do if there is no cursor when clicking on the input box What to do if there is no cursor when clicking on the input box Nov 24, 2023 am 09:44 AM

Solutions for clicking the input box without a cursor: 1. Confirm the focus of the input box; 2. Clear the browser cache; 3. Update the browser; 4. Use JavaScript; 5. Check the hardware device; 6. Check the input box properties; 7. Debug JavaScript code; 8. Check other elements of the page; 9. Consider browser compatibility.

How to use the input box carriage return event and verification function in the Vue document How to use the input box carriage return event and verification function in the Vue document Jun 20, 2023 am 09:13 AM

Vue is a popular JavaScript front-end framework with a responsive data binding and component system at its core. In Vue applications, the input box is one of the most commonly used UI elements. When the user enters text, we hope to listen for the carriage return event and validate the input before submitting. This article will introduce the input box enter event and verification function usage in the Vue document. 1. The carriage return event of the input box in Vue. Monitoring the carriage return event of the input box in Vue is very simple.

See all articles