同样是最近遇到的一个小问题。因为IE9以下input是不支持placeholder属性的。在网上找到了解决方案,果断带走。正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢。借花献佛在这里记录分享下。

  用法很简单,在代码中引入placeholder.js,并加入后面的一段代码就行了。

 <script src="jquery-1.11.3.js"></script>
<!--IE8-IE6支持html5 placeholder新属性 引入脚本及相应功能代码-->
<script src="placeholder.js"></script>
<script>
// 使IE8-IE6支持html5 placeholder新属性
$(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()
}
});

其中placeholder.js的源码如下:

 (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 +=
}
$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'
} 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()) )
} $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 <=)) {
hide()
}
})
.bind('keyup' + ns,check)
} $input.get().onpropertychange = check position()
check()
})
} })(jQuery)

  有时候,并不需要把所有的都弄的一清二楚,不可能也没必要。更应该把精力放在对自己来说更合适更有意义更有价值的地方

(二)给IE6-IE9中的input添加HTML5新属性-placeholder的更多相关文章

  1. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

  2. JavaScript中对象数组,如何给对象添加一个新属性

    var a =[{name: 'Tom',age:20},{name: 'Tom2',age:22}] 现在给a数组中的第一个对象添加性别属性 a[0]['gender']='women' a[0][ ...

  3. vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法

    在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...

  4. 在js中为对象添加和删除属性

    对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...

  5. HTML中使用<input>添加的按钮打开一个链接

    在HTML中,<form>表单的<input type="button">可以添加一个按钮.如果想让该按钮实现<a> 的超链接功能,需要如下实现 ...

  6. idea中pom.xml添加了新的maven依赖,点击import changes没反应

    打开file,setting. 选择Build,Execution,Deployment -> Build Tools -> Maven. 修改maven home directory为自 ...

  7. js动态添加未知新属性

    1 前言 由于项目需要,需要实现获取服务器不同网卡扫局域网中的某种类型设备,然而不同服务器的网卡个数是不相同的,从而需要动态增加未知属性来统计不同网卡扫到的设备个数. 2 代码 function ni ...

  8. HTML5新属性在Google浏览器中不能显示的问题

    这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...

  9. python 中的input

    渣渣之路. 一. 在python编程初学者指南中的第六章.使用参数和返回值的例子中: # -*- coding: utf-8 -*- def display(message): print messa ...

随机推荐

  1. aStar算法求第k短路

    A*的概念主意在于估计函数,f(n)=g(n)+h(n),f(n)是估计函数,g(n)是n节点的当前代价,h(n)是n节点的估计代价:而实际中,存在最优的估计函数f'(n)=g'(n)+h'(n),那 ...

  2. ThinkPHP实现用户登录

    ThinkPHP实现用户登录 ? //默认url入口 ? class IndexAction extends Action{ function index() { //检查用户是否登录 if(isse ...

  3. BestCoder Round#11div2 1003

    ----- 有时候如果枚举起点超时,那么试试枚举终点. 枚举每一个i为终点(0<= i < n),且维护起点下标startPos 对于终点i,cnt[str[i]] ++,   如果小于等 ...

  4. windows phone (22) 隐藏元素

    原文:windows phone (22) 隐藏元素 在wp中我们也会用到隐藏某个元素,已达到某种效果,刚刚从文章看到了,分享一下[作者:神舟龙] Visibility 此属性能非常方便的实现隐藏某个 ...

  5. C#中的关键字

    abstract event new struct as explicit null switch base extern object this bool false operator throw ...

  6. 辛格尔顿和Android

    辛格尔顿(Singleton) .singleton.h,定义类的基本成员及接口 #ifndef SINGLETON_H_INCLUDE #define SINGLETON_H_INCLUDE cla ...

  7. HDOJ 5147 Sequence II 树阵

    树阵: 每个号码的前面维修比其数数少,和大量的这后一种数比他的数字 再枚举每一个位置组合一下 Sequence II Time Limit: 5000/2500 MS (Java/Others)    ...

  8. Windows 8 应用开发 - 异步调用

    原文:Windows 8 应用开发 - 异步调用     不论是桌面客户端还是Web应用通常会出现处理时间较长的操作,为了在这段时间内不影响用户与应用之间的交互体验,开发人员通常会使用异步调用技术,使 ...

  9. ORA-00600 [kollasg:client-side tmp lob]

    今天在查看一个库的日志时,发现被ORA-00600 [kollasg:client-side tmp lob] 错误刷屏了. 发生该错误的原因是由于应用那边lob的问题.lob没有被初始化,建议使用E ...

  10. 双向链表实现简单的list

    双向链表结构: 定义一个如下结构体 struct Node { Object data; Node *next; Node *prev; }; 下面为list的具体实现: #include <i ...