使用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 相关文章推荐
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
vue实现菜单切换功能
May 08 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
js实现橱窗展示效果
Jan 11 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP面向对象精要总结
2014/11/07 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Git命令之分支详解
2021/03/02 PHP
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
django中的setting最佳配置小结
2017/11/21 Python
Python中协程用法代码详解
2018/02/10 Python
Django实现学生管理系统
2019/02/26 Python
详解python中各种文件打开模式
2020/01/19 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
学python爬虫能做什么
2020/07/29 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
写自荐信三大法宝
2014/01/24 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
国庆庆典邀请函
2015/02/02 职场文书
mysql 排序失效
2022/05/20 MySQL
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL