• IE下 input 的父级标签被 disabled 之后引发的怪异行为


    前段时间做了个网盘类的项目,意外发现了这个情况

    IE下,将input的父级标签增加 disabled 属性之后,input 的行为变得怪异:

    1、input 背景变灰,疑似也被disabled 了。

    2、input 仍然可以输入英文数字等字符,但无法切换输入法,无法粘贴

    其他浏览器不受影响。

    层层排查之后才发现是 input 的父级标签被设置了 disabled="true" 所致。

    可以用IE 打开这个DEMO  查看。

    <!doctype html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>disable input parent</title>
    <script src="http://s0.qhimg.com/lib/jquery/183.js"></script>
    <style>
    	.enabtn,
    	.dis .disbtn{ display:none;}
    	
    	.dis .enabtn{ display:block;}
    	input{300px; margin-bottom:4px; height:24px;}
    	button{ 86px; height:26px; line-height:26px;}
    </style>
    </head>
    
    <body>
    <span id="con">
    <input type="text" maxlength="255">	
    </span><br>
    <button type="button" class="disbtn">
    	disable span
    </button>
    <button type="button" class="enabtn">
    	enable span
    </button>
    
    <script>
    	$('button').click(function(){
    		var btn = $(this);
    		if(btn.hasClass('disbtn')){
    			$('body').addClass('dis');
    			$('#con').attr('disabled',true);
    			}else{
    			$('body').removeClass('dis');
    			$('#con').removeAttr('disabled');	
    			}
    		});
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    zendstudio xdebug 配置
    一键清除cvs/svn 目录
    mysql 引擎区分
    ngnix 配置
    linux下mysql安装、目录结构、配置
    tomacat 配置ssl协议
    HTML中<title>与<h1>区别
    HTML中<strong>与<b>,<em>与<i>标签的区别
    bootstrap的总结1
    JavaScript的DOM(文档对象)基础语法总结2
  • 原文地址:https://www.cnblogs.com/trance/p/3269846.html
Copyright © 2020-2023  润新知