text boxes such as form input are read-only and not editable in HTML

Source: Internet
Author: User

Recent projects need to modify the mobile phone number to send a verification code when the contents of the input box can not be modified, the Internet to check the information displayed as follows:

1.

Sometimes, we want the text boxes in the form to be read-only, so that users cannot modify the information in them, such as the <input type = "text" name= "INPUT1" value= "China" >, "China" two words can not be modified. The way to achieve is summed up, there are several.  

method 1:onfocus=this.blur ()  
<input type=" text "name=" INPUT1 "value=" China "Onfocus=this.blur () > 

method 2:readonly 
<input type= "text" Name= " INPUT1 "value=" China "READONLY>&NBSP;

<input type=" text "Name=" INPUT1 "value=" China "readonly=" true ">&NBSP;

method 3:disabled 
<input type= "text" name= "INPUT1" value= "China" DISABLED>

<input type= "text" name= "INPUT1" value= "China" disabled= "disabled" >

Can use the third type of

2, first explain that these methods are set up in the beginning, I want to be able to input, and later can not input, so you can not start in the form inside to set.

3, so we can only write in JavaScript or jquery:

How does jquery turn a non-editable text box into an editable state:instead
$ ("input"). Removeattr ("Disabled");//disabled is a property, not an element, with removeattr () to remove an attribute
Of course, you can use that too.
$ ("input"). attr ("disabled", false);
If you add attributes, you can do that.
$ ("input"). attr ("Disabled", true);
"Attention":d isable is the meaning of failure, that is, the form of what can be modified upload, it is not possible, with the use of related words:

Today want to summarize a few very useful HTML tags, development is often used, unfamiliar people may be really unclear, respectively:

ReadOnly, DISABLED, autocomplete

ReadOnly indicates that the value of this field is not modifiable, can only be used with type= "text", can be copied, selectable, can receive focus, and the background receives a pass value.

<input type= "text" name= "www.phpddt.com" readonly= " readonly"/>

Disabled means that the INPUT element is disabled, non-editable, non-replicable, not selectable, cannot receive the focus, and the background does not receive a pass value

<input type= "text" name= "www.phpddt.com" disabled= " disabled"/>

In addition, the input method can be shielded by CSS: <input style= "ime-mode:disabled" >

Finally, a commonly used label, the browser will usually record input input box records, so you enter the time, often pull down a lot of content, such as:

If you want to remove it, it is best to add autocomplete= "off", using the following method: Autocomplete= "Off"

<input type= "text" autocomplete= "Off" id= "number"/>

4, so this is the way to write:
<  input    type=  " text " class= " Span style= "color: #008000; Background-color: #efefef ">" text " maxlength=   name=   "tel"  id=   "tel"  />  
$ ("#tel"). attr ("readonly",true) ; it's ready. 




text boxes such as form input are read-only and not editable in HTML

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.