placeholder兼容性
类别:Web前端 浏览量:2421
时间:2015-8-25 placeholder兼容性
placeholder兼容性placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。
但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理
在页面添加如下脚本
$(function() {
// 如果不支持placeholder,用jQuery来完成
if(!isSupportPlaceholder()) {
// 遍历所有input对象, 除了密码框
$('input').not("input[type='password']").each(
function() {
var self = $(this);
var val = self.attr("placeholder");
input(self, val);
}
);
/* 对password框的特殊处理
* 1.创建一个text框
* 2.获取焦点和失去焦点的时候切换
*/
$('input[type="password"]').each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
var pwdId = pwdField.attr('id');
// 重命名该input的id为原id后跟1
pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#' + pwdId + '1');
pwdPlaceholder.show();
pwdField.hide();
pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
});
pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
);
}
});
// 判断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
// jQuery替换placeholder的处理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({value:val});
$input.focus(function() {
if ($input.val() == val) {
$(this).attr({value:""});
}
}).blur(function() {
if ($input.val() == "") {
$(this).attr({value:val});
}
});
}
标签:jquery
您可能感兴趣
- jQuery中height()、innerheight()、outerheight()的区别
- jquery中filter
- javascript和jquery的区别详解(JavaScript与JQuery框架基础入门教程)
- Jquery中parent()和parents()
- jQuery on()方法
- jquery操作table
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- jQuery如何操作下拉框select
- jquery实现页面滚动时自动加载内容
- jquery轮播图的左右按钮(jQuery轮播图功能实现方法)
- jquery实现聚光灯效果
- jquery deferred对象
- jquery filter方法
- jquery中prop和attr的区别
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- jquery ajax详细教程(jquery+Ajax实现简单分页条效果)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
热门推荐
- python自己做个定时器(对python周期性定时器的示例详解)
- SqlTransaction事务的用法
- css3引导动画教程(详解Css3新特性应用之过渡与动画)
- apache安全配置(apache在win2003下的安全设置配合文件夹权限目录,很好很安全)
- react自适应布局如何实现(React实现分页效果)
- dedecms标题在哪改(dedecms任意页面调用栏目内容标签{dede:field.content/}的方法)
- sql查询过程解析(SQL 联合查询与XML解析实例详解)
- python封装函数讲解(Python中super函数用法实例分析)
- html+css网页布局实例(网页布局入门教程 如何用CSS进行网页布局)
- 织梦dedecms加固版需要付费吗(织梦dedecms系统后台安全提示去除方法)