ie9下placeholder属性不支持,解决办法

登录页面
<div class="m_login_main">
	<h2>用户登录</h2>
	<dl>
		<dd>
			<em class="username"><span></span></em>
			<input id="userAccount" type="text" placeholder="账号" class="m_username" name="userAccount">
		</dd>
		
		<dd>
			<em class="password"><span></span></em>
			<input id="userPassword" type="password" placeholder="密码" class="m_password" name="userPassword">
		</dd>
		<dd>
			<input id="verification" type="text" placeholder="验证码" class="m_username" name="verification" style="width: 158px;border-left: 1px solid #e5e4e7;">
			<a href="javascript:veilCode();" class="sx">
        		<img id="authcode" src="authcode.jsp" alt="" class="pngfix" style="height: 42px; width: 100px;vertical-align: top;"/>
			</a>
		</dd>
		<div style="text-align:center;height:5px;">
			<em id="message" style="color:red;text-align: center;" ></em>
    	</div>
		<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
			<dt>
				<input type="button" class="layui-btn layui-btn-normal" οnclick="login()" value="登录" data-method="offset" data-type="auto">
			</dt>
		</div>
    </tr>
	</dl>
</div>

登录input中有placeholder属性,但是在ie9中不支持placeholder属性,于是用js模拟placeholder

	    <script type="text/javascript">
	    //ie9以下placeholder属性bug修改
	    $(function(){
	        if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder 不支持则执行一下自定义代码
	            $('[placeholder]').focus(function() {
	                var input = $(this);
	                //判断如果你密码框,获取焦点之后属性修改为密码框 如果没有密码框此处判断可以删除 一下同理
	            	if(input[0].id=='userPassword'){
	                	input.prop('type','password');
	                }
	                if (input.val() == input.attr('placeholder')) {
	                    input.val('');
	                    input.removeClass('placeholder');
	                }
	            }).blur(function() {
	                var input = $(this);
	                if (input.val() == '' || input.val() == input.attr('placeholder')) {
	                	//将所有input置为文本框  主要为了重置密码框 
	                	input.prop('type','text');
	                    input.addClass('placeholder');
	                    input.val(input.attr('placeholder'));
	                }else{
	                	//密码框填写密码后 密码后恢复 密码框 
	                	if(input[0].id=='userPassword'){
		                	input.prop('type','password');
		                }
	                }
	            }).blur();
	        };
	    })
		//判断placeholder属性是否可以使用的方法
	    function placeholderSupport() {
	        return 'placeholder' in document.createElement('input');
	    }
	</script>



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值