使用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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
几种tab切换详解
Feb 03 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
JS类的封装及实现代码
2009/12/02 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
利用python画一颗心的方法示例
2017/01/31 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
django模板语法学习之include示例详解
2017/12/17 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python实现图像全景拼接
2020/03/27 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
我的求职择业计划书
2014/04/04 职场文书
工作评语大全
2014/04/26 职场文书
公开承诺书格式
2014/05/21 职场文书
我的中国心演讲稿
2014/09/04 职场文书
教师节表彰会主持词
2015/07/06 职场文书
婚宴父母致辞
2015/07/27 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
如何用Python搭建gRPC服务
2021/06/30 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
python playwrigh框架入门安装使用
2022/07/23 Python