jquery html5 实现placeholder 兼容password ie6

<style type="text/css">
/* 设置提示文字颜色 */
::-webkit-input-placeholder {
color: #838383;
}
:-moz-placeholder {
color: #838383;
}
.placeholder {
color: #ccc;
}
</style>
登录用户名、密码文字提示,鼠标离开显示文字 html5 and jquery<br/>
<br/>
账号:<input type="text" name="email" placeholder = ‘用户账号‘ /><br/>
<br/>
密码:<input type="password" name="password" placeholder = ‘密码‘ autocomplete="off" /><br/>
<script type="text/javascript">
//判断浏览器是否支持 placeholder属性
function isPlaceholder(){
 var input = document.createElement(‘input‘);
 return ‘placeholder‘ in input;
}

if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
 $(document).ready(function() {
     if(!isPlaceholder()){
         $("input").not("input[type=‘password‘]").each(//把input绑定事件 排除password框
             function(){
                 if($(this).val()=="" && $(this).attr("placeholder")!=""){
                     $(this).val($(this).attr("placeholder"));
                     $(this).focus(function(){
                         if($(this).val()==$(this).attr("placeholder")) $(this).val("");
                     });
                     $(this).blur(function(){
                         if($(this).val()=="") $(this).val($(this).attr("placeholder"));
                     });
                 }
         });
         //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
         var pwdField = $("input[type=password]");
         var pwdVal  = pwdField.attr(‘placeholder‘);
         pwdField.after(‘<input id="pwdPlaceholder" type="text" value=‘+pwdVal+‘ autocomplete="off" />‘);
         var pwdPlaceholder = $(‘#pwdPlaceholder‘);
         pwdPlaceholder.show();
         pwdField.hide();
         
         pwdPlaceholder.focus(function(){
          pwdPlaceholder.hide();
          pwdField.show();
          pwdField.focus();
         });
         
         pwdField.blur(function(){
          if(pwdField.val() == ‘‘) {
           pwdPlaceholder.show();
           pwdField.hide();
          }
         });
         
     }
 });
 
}
</script>

时间: 2024-11-05 06:47:51

jquery html5 实现placeholder 兼容password ie6的相关文章

记录:asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6

@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <!--[if (lt IE 8.0)]><link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/login/css/index.src_datauri.css

html5的placeholder属性(IE如何兼容placeholder属性)

界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 10:26:06|  分类: web学习 |  标签:html  js  ie  placeholder  |举报 |字号大中小 订阅 placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如inp

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于以下类型的 input 标签:text, search, url, telephone, email 以及 password. 我们先看下在谷歌浏览器中的效果,如图所示: 获得焦点时: 输入字段: 因为是 html5 属性,自然低版本的浏览器比如 ie6-8 不兼容.下面就介绍下如何在低版本浏览器中

【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder

原文链接:https://www.cnblogs.com/xiaoxianweb/p/5692301.html type为text或password的input,其在实际应用时,往往有一个占位符,类似这样的: 在没有html5前,一般写成value,用js实现交互,文本框获得焦点时,提示文字消失,失去焦点时,文字又出现,这样体验很好,而且也不用在文本框前面放上功能字样的文字了,节省空间.贴一段jquery代码好了: $(":input").focus(function(){//默认文字

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) {    var b = {        focus: "black",      

用jquery实现html5的placeholder功能

html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的提示文字. 当输入框失去焦点时,若输入框中的数据为空,则再次出现提示文体. 效果图: talk is cheap , show you code: <!doctype html> <html> <head> <meta charset="utf-8"

☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Placeholder兼容各大浏览器的例子</title> <script src="jquery-1.8.0.min.js"></script> </head> <body> <form> <div> &

input placeholder 兼容问题

placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9  我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder]').focus(function() { var input = jQuery(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).

placeholder 兼容 IE

placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF.Chrome.Safari.Opera 以及 IE10 都支持,IE6-IE9 都不支持! placeholder 在各个浏览器下基本都是淡灰色显示,不同的地方在于 FF 和 Chrome 中,输入框获得焦点时,placeholder 文字没有变化,只有当输入框中输入了内容时,placeholder 文字才会消失:而在 Safari 和 IE10 下,当输入框获得焦点时