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

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. webdriver自动化脚本

    1.需求如下: 启动火狐浏览器首先打开百度,等待3秒然后打开博客首页,等待2秒然后关闭浏览器 from selenium import webdriver from time import sleep ...

  2. vs2013和vs2010的配置

    win10下vs2013和vs2010的相关配置 ------made by siwuxie095 主要是推荐一些vs2013和vs2010的好用的插件和配色方案,下面主要是以vs2013示例 1.首 ...

  3. leetcode 196. Delete Duplicate Emails

    # 慢,内连接delete p1 from Person p1, Person p2 where p1.Email=p2.Email and p1.Id>p2.Id delete from Pe ...

  4. 【校招面试 之 C/C++】第2题 函数模板、类模板、特化、偏特化

    1.C++模板 说到C++模板特化与偏特化,就不得不简要的先说说C++中的模板.我们都知道,强类型的程序设计迫使我们为逻辑结构相同而具体数据类型不同的对象编写模式一致的代码,而无法抽取其中的共性,这样 ...

  5. vue1.0学习

    vue 一片html代码配合上json,在new出来vue实例 Demo:1 数据双向绑定(v-model="message",{{message}}) <div id=&q ...

  6. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

  7. Luogu 3960 [NOIP2017] 列队 - splay|线段树

    题解 是我从来没有做过的裂点splay... 看的时候还是很懵逼的QAQ. 把最后一列的$n$个数放在一个平衡树中, 有 $n$ 个点 剩下的$n$行数, 每行都开一个平衡树,开始时每棵树中仅有$1$ ...

  8. 深入浅出 JMS（三） - ActiveMQ 消息传输

    深入浅出 JMS(三) - ActiveMQ 消息传输 一.消息协商器(Message Broker) broke:消息的交换器,就是对消息进行管理的容器.ActiveMQ 可以创建多个 Broker ...

  9. webapp的优化总结

    1. 最先加载本地数据,下拉刷新再取最新数据. 2. 图片延后加载.一种方法先<div data-url="xx.png"></div>,先加载一个div, ...

  10. 2018.09.28 牛客网contest/197/B面积并（二分+简单计算几何）

    传送门 比赛的时候把题目看成求面积交了,一直没调出来. 下来发现是面积并气的吐血. 码了一波发现要开long double. 然而直接用现成的三角函数会挂. 因此需要自己手写二分求角度. 大致思路就是 ...