"Learn" Jquery.placeholder.js let IE browser support HTML5 placeholder

Source: Internet
Author: User
Tags jquery library

original link : https://www.cnblogs.com/xiaoxianweb/p/5692301.html

Type is text or password input, which in practice often has a placeholder, similar to this:

In the absence of HTML5, generally written value, with the use of JS Interactive, text box to get focus, the hint text disappears, lost focus, the text appears again, so the experience is very good, and do not have to put the text in front of the function words, save space. Post a jquery code:

$ (": Input"). focus (function () {//default text disappears

if ($ (this). Val () ==this.defaultvalue) {

$ (this). Val ("");

}

}). blur (function () {//default text appears

if ($ (this). val () = = "") {

$ (this). Val (This.defaultvalue);

}

});

In HTML5, the input text box or TEXTAREA text field has its own placeholder property, placeholder, instead of value, and do not have to write JS, which itself has the user input content, the prompt text disappears function.

My idol Zhang Xin Xu very early wrote an article detailing its characteristics, the original address: http://www.zhangxinxu.com/wordpress/?p=2169

But yes, the headache of IE,

Look at this piece of green sea in a few red, ie is the great devil, and, IE8 incompatible even, IE9 is not compatible, how can be assured of the use of, use will also be led to detect the bug.

Or use back value, but, such a good attribute is not reconciled, Madam Pity. It doesn't matter, there are problems to find Niang Ah, search search, so that placeholder can be compatible with IE results not too much oh.

Finally, find the perfect solution and be compatible with password. Using the plugin Jquery-placeholder.js

Simple to use, just introduce jquery library files and plug-in files, and add a line of code calls, specifically as follows:

<! DOCTYPE html>

<title></title>

<script type= "Text/javascript" src= "Jquery.js" ></script>

<script type= "Text/javascript" src= "Jquery-placeholder.js" ></script>

<script>jquery (function ($) {$.placeholder.ini ();}) </script>

<style>input{width:500px}</style>

<body>

<div>

<div>

<span>username:</span>

<span>

<input type= "text" placeholder= "Put your name here, max length is + letters" maxlength= "/>"

</span>

</div>

<div>

<span>password:</span>

<span>

<input type= "Password" placeholder= "Your password Here"/>

</span>

</div>

</div>

</body>

"Learn" Jquery.placeholder.js let IE browser support HTML5 placeholder

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.