Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
