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 unbind
- jQuery商品属性选择的实现
- jquery中index()
- Uncaught TypeError: jQuery.handleError is not a function
- jquery中append和appendto的区别
- jquery中is()
- jquery中filter
- JQuery中extend的用法
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- MVC中使用jQuery加载分部视图(PartialView)
- jquery中hasClass()、is()判断是否包含指定的class
- jquery实现微信中长按识别二维码
- jquery实现标签输入功能
- jQuery toggleClass
- jquery中find()与filter()的区别
- 2014-8-31
- 新款起亚霸锐实拍,比普拉多气派,配3.0T V6,引入国内或许能大卖(新款起亚霸锐实拍)
- ()
- 张勇 阿里新任掌门人(阿里新任掌门人)
- 毛戈平全国第一柜花落银泰 高端国货迎来 高光 时刻(毛戈平全国第一柜花落银泰)
- 14岁丧父 20岁丧母,从苦难走向辉煌的银泰创始人沈国军(14岁丧父20岁丧母从苦难走向辉煌的银泰创始人沈国军)
- 银泰集团董事长沈国军获评 北京影响力 十大企业家(银泰集团董事长沈国军获评)
热门推荐
- mysql 用户权限配置(详解MySQL 用户权限管理)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- ASP.NET方法重载
- php面向对象final怎么设置(PHP面向对象程序设计中的self、static、parent关键字用法分析)
- 最全js面试题(JavaScript必看的10道面试题总结推荐)
- vue实现添加一段代码功能(Vue实现动态查询规则生成组件)
- tomcat架构结构图(Tomcat核心组件及应用架构详解)
- easyui中使用编辑器在IE下有时无法获取焦点
- yii2对比springboot(Yii框架响应组件用法实例分析)
- h5支付接口第四方支付(h5移动端调用支付宝、微信支付的实现)