解决html5新标签【placeholder】低版本浏览器下不兼容问题
原文地址:https://www.cnblogs.com/gaofengming/p/5163297.html 感谢博主分享
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。
实例: 1 <input type="text" name="userName" placeholder="请输入用户名">
placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性。
然而,在IE9以下版本浏览器就失效了,并且IE10+支持placeholder属性,它的表现与其它浏览器也不一致
- IE10+里鼠标点击时(获取焦点)placeholder文本消失
- Firefox/Chrome/Safari点击不消失,而是键盘输入时文本消失
那么作为一名开发人员,是否应该去克服解决这个问题呢。目前网上也一堆类似解决方案,大致实现思路分为两种:
- (方式一)使用input的value作为显示文本,模拟灰色样式,focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue);
- (方式二)不使用value,添加一个额外的标签(span)到body里然后绝对定位覆盖到input上面。
在这里因第一种方式实现起来,占用了value且验证时需要做额外的判断,那么个人建议使用第二种方式。
首先,判断当前浏览器是否支持placeholder属性:
function placeholderSupport() { return 'placeholder' in document.createElement('input'); }
上关键代码:
/*
*placeholder兼容ie9以下
*/
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$(document).ready(function(){
//默认遍历循环添加placeholder
$('[placeholder]').each(function(){
$(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>");
})
$('[placeholder]').blur(function(){
if($(this).val()!=""){ //如果当前值不为空,隐藏placeholder
$(this).parent().find('span.placeholder').hide();
}
else{
$(this).parent().find('span.placeholder').show();
}
})
});
}
});
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Apache虚拟目录配置及vue-cli反向代理的设置方法
- linux socket通讯获取本地的源端口号的实现方法
- 初识centos7与centos6的区别整理(内核、命令等)
- Apache下通过shell脚本提交网站404死链的方法
- centos查找已安装的jdk路径的方法
- CentOS7+apache+php7+mysql5.7配置教程详解
- 如何利用SystemTap统计函数执行耗时详解
- 关于安装linux redhat后无法使用yum命令安装gcc-c++问题的解决过程
- 基于代码的自动化和无代码自动化
- Java Stream中map和flatMap方法
- 关于Apache shiro实现一个账户同一时刻只有一个人登录(shiro 单点登录)
- 视频上云安防视频云服务平台EasyCVR通过海康sdk协议接入多路设备拉流时出现部分设备拉流不稳定是什么原因?
- Centos6.x服务器配置jdk+tomcat+mysql环境(jsp+mysql)
- Linux的压缩和解压缩的方法总结
- RTSP/GB28181/HIKSDK/Ehome协议视频融合平台EasyCVR编译C++报参见“XXX”的声明错误