Solution to HTML5 placeholder

Last Update:2017-01-13 Source: Internet

Author: User

Tags bind extend

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The following browser tests are passed in Windows system: Google Chrome 18,firefox 12,ie 9,ie 6,opera 11.5. In the Android 4.0 system also tested, native browser and opera Mobile12 Basic pass, the flaw is to get focus will empty placeholder prompts.

Jquery.placeholder.zhihu.js section:

The code is as follows

Copy Code

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

Autofocus and placeholder collocation, WebKit empty the prompt text, recommended
$ (' input[placeholder] '). Placeholder ({
The original Placehodler attribute will be deleted, and JS is enforced instead
Usenative:false,
Focus does not clear the prompt text, keypress valid word Fu Shicai 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) {
By?? In the case of possession, it is necessary to move the eligible for.
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 character 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)

HTML section:

The code is as follows

Copy Code

<! DOCTYPE html>
<meta charset= "Utf-8" >

&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. Address@example.ext "></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>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More