使用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 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
JS简单随机数生成方法
Sep 05 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
express异步函数异常捕获示例详解
Nov 30 Javascript
JavaScript文档对象模型DOM
Nov 20 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP5 安装方法
2007/01/15 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
原生js开发的日历插件
2017/02/04 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python二叉树的实现实例
2013/11/21 Python
Python pickle模块用法实例
2015/04/14 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
秋季运动会稿件
2014/01/30 职场文书
《赶海》教学反思
2014/04/20 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
志愿服务心得体会
2016/01/15 职场文书