HTML 5 Placeholder互換性の解決策
20433 ワード
ブラウザにPlaceholderをサポートさせるには多くの方法がありますが、完璧ではありません.多かれ少なかれ問題があります.また、元のサポートされているブラウザでは、フォーカスを取得するとPlaceholderプロンプトが空になります.知乎網の解決方法が良いことを発見し、特に記録した.Windowsシステムでは、Google Chrome 18、Firefox 12、IE 9、IE 6、Opera 11.5のブラウザテストに合格しました.Android 4.0システムでもテストしたところ、オリジナルブラウザおよびOpera Mobile 12はほぼ合格しており、フォーカスを取得するとPlaceholderプロンプトがクリアされるという欠点がある.jquery.placeholder.zhihu.js:
/*
* html5 placeholder pollfill
* -
* -
* : IE 6~9, FF 3.5
//
$('input[placeholder]').placeholder()
// autofocus placeholder ， webkit ，
$('input[placeholder]').placeholder({
// placehodler ， JS
useNative: false,
// focus ， keypress
hideOnFocus: false,
//
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 ) {
//
$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) {
// ，
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'
}
//
var ns = '.' + opt.namespace, $layer = $input.data('layer' + ns)
if (!$layer) {
$input.data('layer' + ns, $layer = $('', 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 >= 65 && key <=90)) {
hide()
}
})
.bind('keyup' + ns,check)
}
// ie ，
// ie9 jq bind
$input.get(0).onpropertychange = check
position()
check()
})
}
})(jQuery)
Demo:
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 placeholder jQuery Plugintitle>
<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>
head>
<body>
<h1>HTML5 Placeholder jQuery Pluginh1>
<form id="test">
<p><label><code>type=searchcode> <input type="search" name="search" placeholder="Search this site…" autofocus>label>p>
<p><label><code>type=textcode> <input type="text" name="name" placeholder="e.g. John Doe">label>p>
<p><label><code>type=emailcode> <input type="email" name="email" placeholder="e.g. [email protected]">label>p>
<p><label><code>type=urlcode> <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/">label>p>
<p><label><code>type=telcode> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">label>p>
<p><label for="p"><code>type=passwordcode> label><input type="password" name="password" placeholder="e.g. hunter2" id="p">p>
<p><label><code>textareacode> <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>
html>
:http://xyly624.blog.51cto.com/842520/864959