您的位置：首页 > Web前端 > HTML5

html5 Placeholder属性兼容IE6、7方法

2013-09-16 16:57 483 查看

使低版本浏览器支持Placeholder有很多方法，都不是很完美，或多或少有点问题，且有些原生支持的浏览器在获得焦点时会清空Placeholder提示。发现zhihu的解决方法不错，特记录下

windows系统中以下浏览器测试通过:Google Chrome 18,Firefox 12,IE 9,IE 6,Opera 11.5。在android 4.0系统也测试了下，原生浏览器及Opera Mobile12基本通过，缺陷是获得焦点时会清空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 = $('<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 >= 65 && key <=90)) {

hide()

}

})

.bind('keyup' + ns,check)

}

// 由于 ie 记住密码的特性，需要监听值改变

// ie9 不支持 jq bind 此事件

$input.get(0).onpropertychange = check

position()

check()

})

}

})(jQuery)

html部分：

代码如下

复制代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">



<title>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>

</head>

<body>

<h1>HTML5 Placeholder jQuery Plugin</h1>

<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 69 88"></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>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航