Когда я пытаюсь изменить свойство Disabled компонента ввода текста HTML, размер родительского компонента, который является таблицей, изменяется.
Мне нужно использовать div для группировки моих компонентов, поэтому я не могу исправить это, удалив div.
Вот несколько демонстрационных видео и пример кода для воспроизведения:
http://www.youtube.com/watch?v=yX9iw3PQ_eg
<html>
<HEAD>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test bug</title>
<style type="text/css">
.tableCell {
border-style: solid;
border-width: 1px;
border-color: #0000ff;
}
.textInput {
width: 100%;
}
</style>
<script type="text/javascript">
function toggleByDivId() {
toggleDisabled( document.getElementById( "divTextInput" ) ) ;
}
function toggleDisabled( el ) {
try {
//el.enablement = el.enablement == "enabled" ? "disabled" : "enabled"; // object doesn't support this property or method
//el.setAttribute( 'disabled', true ); // object doesn't support this property or method
//el.attributes.disabled = true; // 'attributes' is null or not an object
el.disabled = !el.disabled ? true : false; // IE object doesn't support this property or method
}
catch( err ) {
var errMsg =
"err: " + err +
"\r\nerr.number & 0xFFFF: " + (err.number & 0xFFFF) +
"\r\nerr.description: " + err.description +
"\r\nel.nodeName: " + el.nodeName +
"\r\nel.nodeType: " + el.nodeType ;
alert( errMsg );
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled( el.childNodes[x] );
}
}
}
</script>
</HEAD>
<body >
<table border="0" width="100%">
<tr>
<td width="40%" class="tableCell" >
<input type="button" value="Set Text Disabled" onclick="toggleByDivId();" >
</td>
<td width="20%" class="tableCell" > </td>
<td width="40%" class="tableCell" >
<div id="divTextInput" >
<input id="textInput" type="text" class="textInput" >
</div>
</td>
</tr>
</table>
</body>
</html>