Placeholder is a useful property that prompts the user to enter the correct content in the input box, but the IE8 and IE8 browsers do not support this property, and we can use JS to simulate similar effects. Directly below the code:
<!DOCTYPE HTML><HTML><Header><MetaCharSet= "Utf-8"><title>Placeholder</title><styletype= "Text/css">*{margin:0;padding:0;}form{margin:50px;}input{Display:Block;margin:0 0 6px 0;}</style></Header><Body> <form>User name:<inputname= "Name"placeholder= "Please enter user name"/>Password:<inputname= "Password"placeholder= "Please enter login password"/> </form><Scripttype= "Text/javascript"src= "Jquery-1.11.1.min.js"></Script><Scripttype= "Text/javascript">$(function(){ functionPlaceholdersupport () {//determine if the browser supports placeholder return 'placeholder' inchDocument.createelement ('input'); } if(!Placeholdersupport ()) {$ (document). On ('Focus', '[Placeholder]',function() { varinput= $( This); if(Input.val ()==input.attr ('placeholder') {input.val ("'); Input.removeclass ('placeholder'); } }); $ (document). On ('Blur', '[Placeholder]',function() { varinput= $( This); if(Input.val ()== "' ||Input.val ()==input.attr ('placeholder') {Input.addclass ('placeholder'); Input.val (Input.attr ('placeholder')); } }); $('[Placeholder]'). blur (); };});</Script></Body></HTML>
' Placeholder ' in document.createelement (' input '), which uses an in expression to determine whether a placeholder attribute exists in the INPUT element in the browser.
$ (' [placeholder] ') is a jquery property selector that selects all elements on the page that have the Placheholder attribute. When the page load is complete, we first call the blur () method, which sets the value of all input elements to the corresponding value of the input property placeholder, thus simulating the effect of the placeholder.
The effect is as follows:
effect when input is selected:
Simulate placeholder effects in browsers such as IE8 that do not support placeholder properties
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
