html5中placeholder兼容js代码

在做项目时,特别对于登录,注册一些重要提示,一般都是使用placeholder属性,可以实现输入时提示信息消失,失去焦点后提示信息显示,只是这个属性也存在不够兼容;

下面的代码可以尝试去用jQuery来完成不支持placeholder的时候。

注意:对于密码框需要单独进行处理,另外,input 框里的文字样式可能需要另加修改。

自己可以在这段代码的基础上进行改善,以达到自己需要的效果。

$(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 style="background:transparent;_border:0;height:32px;line-height:32px;" 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});
}
});
}

时间: 2024-12-01 13:10:52

html5中placeholder兼容js代码的相关文章

unity3d material-unity3d中 如何用js代码来更改shader中的3个子着色器

问题描述 unity3d中 如何用js代码来更改shader中的3个子着色器 #pragma strictvar alpha;var fadeSpeed : float=10;var timeLeft:float=10;var rotationSpeed:float = 100.0f; function Start () { } function Update () { transform.Rotate(Vector3(0rotationSpeed*Time.deltaTime0)); if (

JSF中如何写js代码提交到JSF的管理Bean的一个方法中

问题描述 请问在JSF中如何写js代码提交到JSF的管理Bean的一个方法中faces-config.xml代码片段 <managed-bean><managed-bean-name>loginAction</managed-bean-name><managed-bean-class>com.test.action.login.LoginAction</managed-bean-class><managed-bean-scope>re

代码兼容-JS代码的浏览器兼容问题

问题描述 JS代码的浏览器兼容问题 求大家帮帮忙,我在js代码中写的是 window.onload=function(){setInterval(showtime,1000);} function showtime(){ var current = new Date(); var t = document.getElmentById("time"); t.firstChild.innerText = current.toLocaleString(); } 此代码是在浏览器中实时显示本地

获取内联和链接中的样式(js代码)_javascript技巧

复制代码 代码如下: var head = document.getElementById( "box" ); // alert( head.style.background ) // alert( head.style.cssFloat || head.style.styleFloat ) // 获取float不一样 // head.style.fontSize = "30px" head.style.color = "#f00"; // (t

网页广告中JS代码的信息监听示例

 在一些网页广告中提供的JS代码可以进行代码注入,然后监视各种元素,下面有个示例,大家可以参考下 在一些网页广告中提供的JS代码可以进行代码注入,然后监视各种元素,  下面的例子是监视百度输入框的输入的值,然后显示出来,   代码如下: ;(function()  {    function myfn()  {  var ssk=document.getElementById("kw");  var ssz=ssk.value;  alert(ssz);  }    var btn =

js 兼容性-有个js代码,火狐浏览器可以实现,谷歌不行,求解决

问题描述 有个js代码,火狐浏览器可以实现,谷歌不行,求解决 用js写了一个切换样式的(用下拉框选择样式切换).但是在火狐浏览器可以实现切换,在谷歌和360浏览器就没有反应.求教大神指导.下面是有关代码,有些没有关系的我就删了. //皮肤样式切换 function switchStylestyle(styleName){ aa=document.styleSheets; for(i=0;i<aa.length;i++){ aa[i].disabled=true; if(aa[i].title==

内部js代码获取后台变量

Java Web中,内部js代码如何获取服务器后台的变量呢? 根据jsp页面使用的标签不同有一下几种情况: (1)页面使用EL表达式,使用spring MVC 内部js代码: Js代码   alert("222:${sessionScope.practiceWay}");   var practiceWay=String("${sessionScope.practiceWay}");     (2)页面使用struts标签 Js代码   var length=Num

《HTML5开发手册》——第1章 HTML5中新的结构元素 第1章 HTML5中新的结构元素

第1章 HTML5中新的结构元素 HTML5并不是一种具有JavaScript API和酷炫视频的交互式巫术.它有20多个新的元素,可以用来开发Web页面.添加语义以交付容易访问的可重用内容. 在后面章节,我们将学习新的HTML5表单控件和多媒体元素.本章主要讲解新的结构元素,如header.hgroup.nav.footer.article.section和aside.你将知道何时以及如何单独或组合使用这些新元素.实际上,你还将学会利用这些新元素创建一个基本的网站模板,如图1.1所示. 1.1

Html5的placeholder属性(IE兼容)实现代码_jquery

HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.以前要实现这效果都是用JavaScript来控制才能实现 , firefox.google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id="t1" type=&