zoukankan      html  css  js  c++  java
  • jquery 处理密码输入框(input type="password" ) 模仿placeholder

    html

    <form method="post" action="">
    	                <ul>
    	                	<li>
    	                		<span>邮箱</span>
    	                	    <input type="text" name="email" value="请输入邮箱" onfocus="if(value == '请输入邮箱'){value =''}" onblur="if(value == ''){value ='请输入邮箱'}" >
    	                	</li>
    	                	<li>
    	                		<span>密码</span>
    	                		<input name="" type="text" value="密码" id="text" >
    							<input name="" type="password" style="display:none;" id="password">
    	                	</li>
    	                	<li>
    	                		<span>验证码</span>
    	                		<input type="text" name="code" class="code">
    	                		<img src="">
    	                	</li>
    	                	<li>
    	                	    <span></span>
    	                		<label><input type="checkbox" checked="checked" name="check" class="checked"><i>记住密码</i></label>
    	                		<a href="" class="forget">忘记密码</a>
    	                	</li>
    	                	<li>
    	                		<span></span>
    	                		<a href="" class="login-btn">登录</a>
    	                	</li>
    	                </ul>
    	            </form>
    

    jquery

    <script type="text/javascript">
        function _password(hid,pid){
        	var _hid = $("#"+hid);
        	var _pid = $("#"+pid);
        	_hid.focus(function(){
        		var _hval = $.trim($(this).val());
        		if(_hval != "密码") return;
        		$(this).css("display","none");
                _pid.css("display","block").val("").focus();
        	});
        	_pid.blur(function(){
        		var _hval = $.trim($(this).val());
        		if(_hval != "") return;
        		$(this).css("display","none");
        		_hid.css("display","block").val("密码");
        	})    	
        }
        _password('text','password')
    </script>
    

      

  • 相关阅读:
    边框上带有文字
    满屏展示
    javaScript中SetInterval与setTimeout区别
    圆形进度条
    抢购(秒杀)业务的技术要点
    Sybase 动态改变存储过程里查询的数据库
    在Hibernate映射文件里配置Sequence
    初学struts2杂乱笔记
    Struts2的学习链接
    DWR框架在web.xml的完整配置及注释
  • 原文地址:https://www.cnblogs.com/bestsamcn/p/4900363.html
Copyright © 2011-2022 走看看