Solutions to HTML5 Placeholder

Original works, allow reprint, please be sure to use hyperlinks in the form of the original source of the article, author information and this statement. Otherwise, the legal liability will be investigated. http://xyly624.blog.51cto.com/842520/864959

There are many ways to make the browser support placeholder, which are not perfect, more or less problematic, and some natively supported browsers will empty the placeholder hint when they get the focus. found that the solution to the network is good, special record.

The following browsers are tested on the Windows system: Google Chrome 18,firefox 12,ie 9,ie 6,opera 11.5. The Android 4.0 system was also tested under the native browser and opera Mobile12 Basic pass, the flaw is to get the focus when the placeholder hint will be emptied.

Jquery.placeholder.zhihu.js:

/*
* HTML5 placeholder Pollfill
*-inline layer with absolute positioning
*-also applies to password fields
* Target browser: IE 6~9, FF 3.5
```
Default
$ (' input[placeholder] '). Placeholder ()

Autofocus with placeholder, non-webkit empty the hint text, recommended
$ (' input[placeholder] '). Placeholder ({
Will delete the original Placehodler attribute, forcing the substitution with JS implementation
Usenative:false,
Focus does not clear the prompt text, keypress effective word characters empty
Hideonfocus:false,
Additional styles
Style: {
Textshadow: ' None '
}
})
```
*/
(function ($) {
var attr = ' placeholder ', nativesupported = attr in document.createelement (' input ')

$.fn.placeholder = function (options) {
Return This.each (function () {
var $input = $ (This)

if (typeof options = = = ' String ') {
Options = {Text:options}
}

var opt = $.extend ({
Text: ",
Style: {},
Namespace: ' Placeholder ',
Usenative:true,
Hideonfocus:true
}, Options | | {})

if (!opt.text) {
Opt.text = $input. attr (attr)
}

if (!opt.usenative) {
$input. Removeattr (attr)
}else if (nativesupported) {
Change Text Only
$input. attr (attr, Opt.text)
Return
}

var width = $input. Width (), height = $input. Height ()
var box_style = [' margintop ', ' marginleft ', ' paddingtop ', ' paddingleft ', ' paddingright ']

var show = function () {$layer. Show ()}
var hide = function () {$layer. Hide ()}
var is_empty = function () {return! $input. Val ()}
var check = function () {Is_empty ()? Show (): Hide ()}

var position = function () {
var pos = $input. Position ()
if (!opt.hideonfocus) {
To hide the key, you need to move the light two pixels
Pos.left + = 2
}
$layer. CSS (POS)
$.each (Box_style, function (i, name) {
$layer. CSS (name, $input. CSS (name))
})
}

var Layer_style = {
Color: ' Gray ',
Cursor: ' Text ',
TextAlign: ' Left ',
Position: ' Absolute ',
FontSize: $input. css (' fontSize '),
fontFamily: $input. css (' fontFamily '),
Display:is_empty ()? ' Block ': ' None '
}

Create
var layer_props = {
Text:opt.text,
Width:width,
Height: ' Auto '
}

Make sure to bind only once
var ns = '. ' + opt.namespace, $layer = $input. Data (' layer ' + ns)
if (! $layer) {
$input. Data (' layer ' + ns, $layer = $ (' <div> ', layer_props). AppendTo ($input. offsetParent ()))
}

Activate
$layer
. CSS ($.extend (Layer_style, Opt.style))
. Unbind (' click ' + ns)
. bind (' click ' + NS, function () {
Opt.hideonfocus && Hide ()
$input. Focus ()
})

$input
. Unbind (NS)
. bind (' blur ' + ns, check)

if (Opt.hideonfocus) {
$input. Bind (' Focus ' + ns, hide)
}else{
$input. Bind (' keypress keydown ' + NS, function (e) {
var key = E.keycode
if (E.charcode | | (Key >= && key <=90)) {
Hide ()
}
})
. bind (' KeyUp ' + ns,check)
}

Because IE remembers the characteristics of the password, it needs to change the listening value
IE9 does not support JQ bind this event
$input. Get (0). Onpropertychange = Check

Position ()
Check ()
})
}

}) (JQuery)

<! DOCTYPE html>
<meta charset= "Utf-8" >
<!--[If Lt IE 9]>
<script src= "Js/html5shiv.js" ></script>
<! [endif]-->
&LT;TITLE&GT;HTML5 placeholder JQuery plugin</title>
<style>
Body, input, textarea {font:1em/1.4 Helvetica, Arial;}
Label code {cursor:pointer; float:left; width:150px;}
input {width:14em;}
textarea {height:5em; width:20em;}
. placeholder {color: #aaa;}
. note {border:1px solid orange; padding:1em; background: #ffffe0;}
</style>
<body>
&LT;H1&GT;HTML5 Placeholder jQuery plugin<form id= "Test" >
<p><label><code>type=search</code> <input type= "search" name= "search" placeholder= " Search this site ... "autofocus></label></p>
<p><label><code>type=text</code> <input type= "text" name= "name" placeholder= "e.g. John Doe "></label></p>
<p><label><code>type=email</code> <input type= "email" name= "email" placeholder= "e.g. [ Email protected] "></label></p>
<p><label><code>type=url</code> <input type= "url" name= "url" placeholder= "e.g./HTTP mathiasbynens.be/"></label></p>
<p><label><code>type=tel</code> <input type= "Tel" name= "tel" placeholder= "e.g. +32 472 77 "></label></p>
<p><label for= "P" ><code>type=password</code> </label><input type= "password" name= "Password" placeholder= "e.g Hunter2" id= "P" ></p>
<p><label><code>textarea</code> <textarea name= "message" placeholder= "Your message Goes Here "></textarea></label></p>
<p><input type= "Submit" value= "Type=submit" ></p>
</form>
<script src= "Js/jquery-1.7.2.min.js" ></script>
<script src= "Js/jquery.placeholder.zhihu.js" ></script>
<script>
$ (function () {
var support = (function (input) {
return function (attr) {return attr in input}
}) (Document.createelement (' input '))
if (! ( Support (' placeholder ') && $.browser.webkit)) {
$ (' input[placeholder],textarea[placeholder] '). Placeholder ({
Usenative:false,
Hideonfocus:false,
Style: {
Textshadow: ' None '
}
});
}

if (!support (' autofocus ')) {
$ (' input[autofocus] '). Focus ()
}
});
</script>
</body>

Solutions to HTML5 Placeholder