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

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{width:300px; margin-bottom:4px; height:24px;}

	button{ width: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>

　　

IE下 input 的父级标签被 disabled 之后引发的怪异行为的更多相关文章

  1. JS - 点击事件排除父级标签

    点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...

  2. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. IIS7.5下启用asp父级路径

    如果你是运行asp显示需要启动父路径的话可以这样解决: 在IIS 下 打开ASP选项,有个启用父路径的选择项,选择True 就可以了! 具体看图!因为没法贴两张图,就弄在一张里了!

  4. 解决“”父级标签和子标签边框重叠，设置子标签的margin父标签会跟着移动“”的方法

    1.可以给父标签一个padding,然后给一个很小的值,虽然不影响整体但是不建议使用 2.给父标签一个"over:hidden"的样式,推荐使用

  5. CSS解决父级边框坍塌的问题

    1. 浮动元素后面增加空的div 首先在父级标签内添加如下<div>标签 <div id="clear"></div> 然后在CSS中对该标签进 ...

  6. Element-ui树形控件el-tree获取父级节点的id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  7. div高度不能自适应（子级使用float浮动，父级div高度不能自适应）

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

  8. 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

    前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...

  9. Dedecms中{dede:type}标签支持调用父级栏目名称

    需求: 我们用{dede:type}标签调用栏目相关内容时,同时需要调用该栏目的父级栏目的名称. {dede:type}标签的代码做了一下开发,支持这个调用了. 开发方法: 1.打开include/t ...

随机推荐

  1. ReactNative手势解锁(react-native-ok-gesture-password)

    在大前端的趋势之下,我也慢慢开始从事React Native相关的开发.但是奈何React Native生态相对于Android来说还是太小了.许多开源的库早早就已经不再维护.之前项目中需要用到手势解 ...

  2. C & C++ 宏与const

    1.宏定义函数: 例:#define do{exp} while(0)与#define exp有什么不同,好处在哪里? 定义复杂代码,防止分号,或是括号不匹配等错误.比如: 定义: #define s ...

  3. 基于AspectJ的XML方式进行AOP开发

    -------------------siwuxie095                                 基于 AspectJ 的 XML 方式进行 AOP 开发         1 ...

  4. 如何转换pdf文档为word文档--先标记下，本周把这个问题知识掌握

    http://developer.51cto.com/art/201803/567539.htm

  5. iOS 多页面跳转同一页面时数据处理

    如果 同一个界面, 会有10个数据源传进来, 此时 创建 一个总模型fullmodel 存储 10个model 数据, 创建 10个一样的cell, 在 不同数据, 用不同cell处理最好, 千万别于 ...

  6. c语言指针数组和结构体的指针

    指向数组的指针,先初始化一个数组,使用传统方式遍历 void main() { ] = { ,,,, }; ; i < ; i++) { printf("%d,%x\n", ...

  7. 给dede添加栏目图片和栏目描述

    有的时候我们希望调用栏目时把栏目的图片和描述调出来,但dede好像没有提供栏目图片这个功能,而栏目的描述也是给meta:Description使用的,不是很方便.   所以我们需要自已给dede添加图 ...

  8. Spring框架的事务管理之声明式事务管理的类型

    1. 声明式事务管理又分成两种方式 * 基于AspectJ的XML方式(重点掌握)(具体内容见“https://www.cnblogs.com/wyhluckdog/p/10137712.html”) ...

  9. QT中 使用c++调用python

    最近在做一个项目,开发环境用的是QT c++.项目中使用amazon云服务,调研发现有一个Amazon云的python接口.就有了标题中的问题,需要用C++来调用python脚本. 下面是一个c++调 ...

  10. BZOJ2424 [HAOI2010]订货 - 费用流

    题解 (非常裸的费用流 题意有一点表明不清: 该月卖出的商品可以不用算进仓库里面. 然后套上费用流模板 代码 #include<cstring> #include<queue> ...