IE6\7\8下placeholder效果,支持文本框和密码框
(function($) {
var placeholderfriend = {
focus: function(s) {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
}
//判断是否支持placeholder
function isPlaceholer() {
var input = document.createElement('input');
return "placeholder" in input;
}
//不支持的代码
if (!isPlaceholer()) {
$(function() {
var form = $(this);
var elements = form.find("input[type='text'][placeholder]");
elements.each(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == '') {
s.val(pValue).css('color','#E0E0E0');
}
}
});
elements.focus(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (sValue && pValue) {
if (sValue == pValue) {
s.val('').css('color','#E0E0E0');
}
}
});
elements.blur(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (!sValue) {
s.val(pValue);
}
});
var element_em = form.find("input[type='email'][placeholder]");
element_em.each(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == '') {
s.val(pValue).css('color','#E0E0E0');
}
}
});
element_em.focus(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (sValue && pValue) {
if (sValue == pValue) {
s.val('').css('color','#E0E0E0');
}
}
});
element_em.blur(function() {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (!sValue) {
s.val(pValue);
}
});
var elementsPass = form.find("input[type='password'][placeholder]");
elementsPass.each(function(i) {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
s.val(sValue).css('color','#e0e0e0');
if (pValue) {
if (sValue == '') {
var html = this.outerHTML || "";
html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend").replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ").replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue + "' " + "onfocus='placeholderfriendfocus(this);' ");
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue + "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue + "placeholderfriend");
}
s.hide();
s.after(html);
}
}
});
elementsPass.blur(function() {
var s = $(this);
var sValue = s.val();
if (sValue == '') {
var idValue = s.attr("id");
if (idValue) {
s.attr("id", idValue + "placeholderfriend");
}
var clsValue = s.attr("class");
if (clsValue) {
s.attr("class", clsValue + "placeholderfriend");
}
s.hide().next().show();
}
});
});
}
window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);
IE6\7\8下placeholder效果,支持文本框和密码框的更多相关文章
- JAVA 文本框、密码框、标签
//文本框,密码框,标签 import java.awt.*; import javax.swing.*; public class Jiemian5 extends JFrame{ JPanel m ...
- IE下支持文本框和密码框placeholder效果的JQuery插件
基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...
- WPF 之 文本框及密码框添加水印效果
1.文本框添加水印效果 文本框水印相对简单,不需要重写模板,仅仅需要一个 VisualBrush 和触发器验证一下Text是否为空即可. <TextBox Name="txtSerac ...
- spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)
在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...
- 表单form的属性,单行文本框、密码框、单选多选按钮
基础表单结构: <body> <h1> <hr /> <form action="" name="myFrom" en ...
- 模拟placeholder支持ie8以下处理了密码框只读的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- IE中input标签密码框与文本框宽度不一样问题
前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...
- jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
- opacity在IE6~8下无效果,解决的办法
opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...
随机推荐
- Java--对象池化技术 org.apache.commons.pool2.ObjectPool
org.apache.commons.pool2.ObjectPool提供了对象池,开发的小伙伴们可以直接使用来构建一个对象池 使用该对象池具有两个简单的步骤: 1.创建对象工厂,org.apache ...
- python之网络编程
本地的进程间通信(IPC)有很多种方式,但可以总结为下面4类: 消息传递(管道.FIFO.消息队列) 同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 共享内存(匿名的和具名的) 远程过程调用 ...
- python征程3.0(python对象)
1.python使用对象模型来存储数据.构造任何类型的值都是一个对象.”尽管python被当成一种面向对象的脚本的编程语言“,但你完全能够写出不使用任何类和实例的脚本. python对象都拥有三个特性 ...
- 从零开始学 Java - Spring AOP 实现用户权限验证
每个项目都会有权限管理系统 无论你是一个简单的企业站,还是一个复杂到爆的平台级项目,都会涉及到用户登录.权限管理这些必不可少的业务逻辑.有人说,企业站需要什么权限管理阿?那行吧,你那可能叫静态页面,就 ...
- 初识JQuery
轻量级的js库 兼容各种浏览器+css3 传统:js+DHTM jq:解放了客户端的编程, 环境搭建 进入官方网站获取最新的版本 http://jquery.com/download/ ,这里需 ...
- iOS面试题总结 (三)
22 键值编码KVC KVC全称key valued coding 键值编码 提到KVC,就不能不提反射机制,反射机制就是在运行状态中,对于任意一个类,都能够调用他的所有属性和方法,对于任意一个对象, ...
- Android—定位
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private Button ...
- 使用用户自定义类型 CLR UDT
一些复合类型进行范式分解是没有必要的,尤其是一些统一模型的情况下 SET NOCOUNT ON DECLARE @i TimeBalance SET @i = CAST(' ...
- Java 理论与实践: 正确使用 Volatile 变量
Java 语言中的 volatile 变量可以被看作是一种 "程度较轻的 synchronized":与 synchronized 块相比,volatile 变量所需的编码较少,并 ...
- Ajax中Get请求与Post请求的区别
Get请求和Post请求的区别 1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来 2.使用Get请求发送数据量小,Post请求发送数据量大 例子 页面的HTML代码: &l ...