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>
    

      

  • 相关阅读:
    nullptr和NULL
    tmux用于恢复远程屏幕
    如何改变git的默认路径
    scp拷贝文件
    C++头文件<bits/stdc++.h>
    MAME模拟器使用简单教程
    typescript接口扩展
    Typescript中的可索引接口 类类型接口
    typescript函数类型接口
    typescript静态属性 静态方法 抽象类 多态
  • 原文地址:https://www.cnblogs.com/bestsamcn/p/4900363.html
Copyright © 2011-2022 走看看