(二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题。因为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的更多相关文章
- HTML5的表单input元素的新属性
知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...
- JavaScript中对象数组,如何给对象添加一个新属性
var a =[{name: 'Tom',age:20},{name: 'Tom2',age:22}] 现在给a数组中的第一个对象添加性别属性 a[0]['gender']='women' a[0][ ...
- vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法
在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...
- 在js中为对象添加和删除属性
对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...
- HTML中使用<input>添加的按钮打开一个链接
在HTML中,<form>表单的<input type="button">可以添加一个按钮.如果想让该按钮实现<a> 的超链接功能,需要如下实现 ...
- idea中pom.xml添加了新的maven依赖,点击import changes没反应
打开file,setting. 选择Build,Execution,Deployment -> Build Tools -> Maven. 修改maven home directory为自 ...
- js动态添加未知新属性
1 前言 由于项目需要,需要实现获取服务器不同网卡扫局域网中的某种类型设备,然而不同服务器的网卡个数是不相同的,从而需要动态增加未知属性来统计不同网卡扫到的设备个数. 2 代码 function ni ...
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- python 中的input
渣渣之路. 一. 在python编程初学者指南中的第六章.使用参数和返回值的例子中: # -*- coding: utf-8 -*- def display(message): print messa ...
随机推荐
- Windows Phone开发(6):处理屏幕方向的改变
原文:Windows Phone开发(6):处理屏幕方向的改变 俺们都知道,智能手机可以通过旋转手机来改变屏幕的显示方向,更多的时候,对于屏幕方向的改变,我们要做出相应的处理,例如,当手机屏幕方向从纵 ...
- CentOS7+Tomcat 生产系统部署
1 准备OS账户 安全起见,本着最小权限原则,生产系统决不同意使用root账户来执行tomcat.为此,建立新账户tomcat,并设定登录password. useradd tomcat passwd ...
- Android进程间通信(IPC)机制Binder简介和学习计划
在Android系统,每个应用程序是由多个Activity和Service部件,这些Activity和Service有可能在相同的处理被执行,此外,还可以在不同的过程中进行. 然后.不是在同一个过程A ...
- SQL Server提高并发查询效率
同事写了个程序用创建多个线程使用ado同时对同个数据库进行相同的查询,涉及2张数据表的联查.当线程数非常多的情况下,读取数据的效率就会变得很慢,例如50个线程同时查询大概3000条数据,查询完成后通过 ...
- adapter pattern
对象适配器 9.7 适配器模式总结 适配器模式将现有接口转化为客户类所期望的接口,实现了对现有类的复用,它是一种使用频率非常高的设计模式,在软件开发中得以广泛应用,在Spring等开源框架.驱动程序设 ...
- Objective-C代码块语法(block)使用
和其它变量本质上相似的代码块.所不同的是,数据存储代码块是主体的函数. 使用的代码块被,你可以像打电话一样等标准功能,传入参数的数量,并获得返回值. 插入符号(^)语法标记块.我们熟悉的参数按照规约定 ...
- 三——第二部分——第二篇论文 计划建设SQL Server镜像
本文接着前面的章节:SQL Server镜像简单介绍 本文出处:http://blog.csdn.net/dba_huangzj/article/details/27203053 俗话说:工欲善其事必 ...
- HDU 1874 畅通公程续 (最短路 水)
Problem Description 某省自从实行了非常多年的畅通project计划后,最终修建了非常多路.只是路多了也不好,每次要从一个城镇到还有一个城镇时,都有很多种道路方案能够选择,而某些方案 ...
- Duanxx的Design abroad: C++矩阵运算库Eigen 概要
一.概要 这两天想起来要做神经网络的作业了,要求用C++完毕神经网络的算法. 摆在面前的第一个问题就是,神经网络算法中大量用到了矩阵运算.可是C++不像matlab那样对矩阵运算有非常好的支持.本来准 ...
- C++ Primer 学习笔记_33_STL实践与分析(7) --容器适配器
STL实践与分析 --容器适配器 引: 除了顺序容器.标准库还提供了三种顺序容器适配器:queue,priority_queue和stack.适配器是标准库中的概念.包含容器适配器,迭代器适配器和函数 ...