使用jQuery快速解决input中placeholder值在ie中无法支持的问题


Posted in Javascript onJanuary 02, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//第一种方法
$(document).ready(function(){
    var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
    if(defaultValue==''){
        input.value=text}
        input.onfocus=function(){
            if(input.value===text){this.value=''}};
            input.onblur=function(){if(input.value===''){this.value=text}}};
            if(!supportPlaceholder){
                for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
                if(input.type==='text'&&text){placeholder(input)}}}});
//第二种方法
$(function(){
if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
};
})
function placeholderSupport() {
    return 'placeholder' in document.createElement('input');
}
</script>
</head>
<body>
<form>
  <label for="name">用户名:</label>
  <input type="text" placeholder="请输入用户名"/>
</form>
</body>
</html>
Javascript 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
js实现div在页面拖动效果
May 04 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 #Javascript
jQuery简单实现banner图片切换
Jan 02 #Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 #Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 #Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 #Javascript
js/jQuery简单实现选项卡功能
Jan 02 #Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 #Javascript
You might like
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php反射应用示例
2014/02/25 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
javascript中this的四种用法
2015/05/11 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
Ajax的优点和缺点
2014/11/21 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫