$(function() {
// 如果不支持placeholder,用jQuery来完成
if(!isSupportPlaceholder()) {
// 遍历所有input对象, 除了密码框
$('input').not("input[type='password']").each(
function() {
var self = $(this);
var val = self.attr("placeholder");
input(self, val);
}
); /**
* 对password框的特殊处理
* 1.创建一个text框
* 2.获取焦点和失去焦点的时候切换
*/
$('input[type="password"]').each(
function() {
var pwdField = $(this);
var pwdVal = pwdField.attr('placeholder');
var pwdId = pwdField.attr('id');
// 重命名该input的id为原id后跟1
pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');
var pwdPlaceholder = $('#' + pwdId + '1');
pwdPlaceholder.show();
pwdField.hide(); pwdPlaceholder.focus(function(){
pwdPlaceholder.hide();
pwdField.show();
pwdField.focus();
}); pwdField.blur(function(){
if(pwdField.val() == '') {
pwdPlaceholder.show();
pwdField.hide();
}
});
}
);
}
}); // 判断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
} // jQuery替换placeholder的处理
function input(obj, val) {
var $input = obj;
var val = val;
$input.attr({value:val});
$input.focus(function() {
if ($input.val() == val) {
$(this).attr({value:""});
}
}).blur(function() {
if ($input.val() == "") {
$(this).attr({value:val});
}
});
}

placeholder是H5的一个新属性,但是在IE9以下是不支持的的更多相关文章

  1. Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...

  2. JavaScript中对象数组,如何给对象添加一个新属性

    var a =[{name: 'Tom',age:20},{name: 'Tom2',age:22}] 现在给a数组中的第一个对象添加性别属性 a[0]['gender']='women' a[0][ ...

  3. (二)给IE6-IE9中的input添加HTML5新属性-placeholder

    同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...

  4. 前端基础小标签5 H5的一些新标签属性

    第二部分 部分图片和内容摘要于网络 二. formaction 属性规定当表单提交时处理输入控件的文件的 URL. formaction 属性覆盖 <form> 元素的 action 属性 ...

  5. 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中

    问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...

  6. Hmtl5 <input>中placeholder属性(新属性)

    Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...

  7. 将一个对象相同的属性(不区分大小写)赋值给一个新对象 DataTable的一个简单的扩展

    将一个对象相同的属性(不区分大小写)赋值给一个新对象   1 public static T Mapper<S, T>(S source) 2 { 3 T t = Activator.Cr ...

  8. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  9. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

随机推荐

  1. Redis(三)-数据类型

    1.五种数据类型:字符串类型.字符串列表.有序字符串集合.哈希.字符串集合 2.字符串类型常用操作 (1)赋值 $ set key value (2)取值 $ get key (3)删除 $ del ...

  2. 设置RHEL-7.0的运行级别

    在RHEL7中修改默认运行级别与7以前版本的修改方式不同(7以前版本可以修改/etc/inittab中的“id:5:initdefault:”参数值来实现),RHEL7在/etc/inittab文件中 ...

  3. SpringBoot关于SpringDataJpa中findOne()方法报错问题

    问题描述: 首先用的SpringDataJPA的1.11版本,可以使用findOne()方法根据id查询 然后我使用了2.0.5版本,发现findOne()方法报错了,不能用来当作根据id查询了. 当 ...

  4. elementUi中的计数器ele-mumber中的change事件传参及事件调用

    业务场景是需要在点击业务工作量的时候设置任务工作量这一项的评分不能大于任务质量及任务时限的权重之和除以二 上代码 JS逻辑代码 因出现弹出层提示后设置输入框的值如果大于sum的值,设置输入的值为sum ...

  5. ECharts前端图形展示

    这次负责慢查询预警,前后端都是自己处理,这次遇到了前端作图的需求,做一个记录以便后续使用: 使用的作图方式是ECharts,相应的example官方有相应的文档和使用方法,比较简单,一下只贴链接: h ...

  6. 新版seqseq接口说明

    attention_mechanism = tf.contrib.seq2seq.BahdanauAttention(num_units=FLAGS.rnn_hidden_size, memory = ...

  7. Myeclipse在debug模式下没加断点程序卡住,start模式下可以正常启动

    参考<eclipse在debug模式下卡住,start模式下可以启动>,地址:https://blog.csdn.net/jack_chen1994/article/details/761 ...

  8. CentOS 配置防火墙操作实例

    注:防火墙的基本操作命令: 查询防火墙状态: [root@localhost ~]# service   iptables status<回车>   停止防火墙: [root@localh ...

  9. prerender-spa-plugin Vue预渲染配合meta-info优化seo

    记录一下解决方案的过程 先安装prerender和puppeteer插件  这个国外大神写的  github地址就不附上了(百度有) cnpm install prerender-spa-plugin ...

  10. bzoj2369

    题解: 显然把每一个环求出来 然后做一个lcm即可 代码: #include<cstdio> using namespace std; ],f[],n; int gcd(int x,int ...