method One : use JS, add the OnKeyUp method to the HTML tag, use JS to capitalize the characters
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Script> functionToUpper () {vartext=document.getElementById ("ToUpper"). Value; alert (text); } </Script> </Head> <Body>input Box:<inputtype= "text"ID= "ToUpper"onblur= "ToUpper ()"onkeyup= "This.value=this.value.touppercase ()" /> </Body></HTML>
Enter ASD and the input box will be automatically converted to asd! Remove cursor Eject ASD
method Two : use CSS by using CSS in tags
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Script> functionToUpper () {vartext=document.getElementById ("ToUpper"). Value; alert (text); } </Script> </Head> <Body>input Box:<inputtype= "text"ID= "ToUpper"onblur= "ToUpper ()"style= "text-transform:uppercase;" /> </Body></HTML>
Enter ASD and the input box will be automatically converted to asd! Remove cursor Eject ASD
the value of the Text-transform is -none: Default, no conversion occurs, capitalize: The first letter of each word is capitalized; uppercase: uppercase conversion; lowercase: lowercase conversion
the difference between the two : When the method is used, it will give the user a sense of conversion; Method two interface is shown in uppercase, but in essence CSS style, the background needs to be capitalized
HTML text box input letter auto Capitalization