使用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 相关文章推荐
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
layui动态绑定事件的方法
Sep 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
菜鸟学PHP之Smarty入门
2007/01/04 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
禁止拷贝网页内容的js代码
2014/01/22 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
Vue组件开发初探
2017/02/14 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
详解Python pygame安装过程笔记
2017/06/05 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
物业接待员岗位职责
2015/04/15 职场文书
雷锋之歌观后感
2015/06/10 职场文书
红楼梦读书笔记
2015/06/25 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js