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

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. xpath的层级与逻辑定位

    xpath的层级与逻辑定位: 之前我们是通过class和id,name,如果我们所需要的元素没有class,id,name这样的元素,怎么定位呢 1.在不使用xpath情况下:元素没有属性值得时候怎么 ...

  2. 通过jquery,从json中读取数据追加到html中

    1.下载安装jquery   可通过下面的方法引入在线版本的js: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jque ...

  3. MySQL+Navicat for MySQL安装

    一.安装MySQL 1.下载MySQL http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.10-winx64.zip 2.安装 2.1解压安装包 ...

  4. Python bin() 函数

    Python bin() 函数  Python 内置函数 描述 bin() 返回一个整数 int 或者长整数 long int 的二进制表示. 语法 以下是 bin() 方法的语法: bin(x) 参 ...

  5. Sum of Consecutive Prime Numbers

    Sum of Consecutive Prime Numbers http://poj.org/problem?id=2739 Time Limit: 1000MS   Memory Limit: 6 ...

  6. Dice

    Dice http://acm.hdu.edu.cn/showproblem.php?pid=5012 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  7. asp.net 关于Response.Redirect重定向前无法弹出alert对话框的问题

    要实现的功能:某项操作后,使用alert()提示框提示"操作成功"之类的提示,然后使用response.Redirect()来进行页面重定向. 出现的问题:运行代码,操作完成后,直 ...

  8. 兼容多浏览器的网页复制插件（ZeroClipboard）

    前言: 常规利用JS编写的网页复制功能是最简单的方法,但是只对IE有效,无法做到兼容其它浏览器,对其他浏览器也就只能弹窗提示用户手动复制了. <script type="text/ja ...

  9. mongo远程登录

    1. 进入数据库: use admin db.addUser("foo","foo"); ps:高版本用db.createUser创建. 2. 改配置 如/et ...

  10. 9-centos定时任务-不起作用- 没指明路径！！！

    crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动crond进程,cro ...