:::: 菜单 ::::

IE中input元素的.type为只读!

今天遇到一处错误,发现IE中input元素的.type为只读!

相关形容:

ie下input元素的.type无法动态设置;
input.type=”hidden”;
IE中input无法在text和hidden间动态改变;

问题描述:

有这么一段js:

  1. <script type="text/javascript">
  2.     <!--
  3.     function $(){
  4.         return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
  5.     }
  6.     //...
  7.     function safeQSelOnChange()
  8.     {
  9.         if($('safeQuestionSel').value==-1)
  10.         {
  11.             var safeQuestion = $('safeQuestion');
  12.             safeQuestion.input="text";
  13.             safeQuestion.value="";
  14.             safeQuestion.focus();
  15.         }else{
  16.             var safeQuestion = $('safeQuestion');
  17.             var safeQuestionSel = $('safeQuestionSel');
  18.             safeQuestion.input="hidden";
  19.             safeQuestion.value=safeQuestionSel.options[safeQuestionSel.selectedIndex].innerHTML;
  20.         }
  21.     }
  22.     //-->
  23. </script>

配合这么一段html:

  1. <select class="inputLen" name="safeQuestionSel" id="safeQuestionSel" onchange="javascript:safeQSelOnChange();" onblur="javascript:safeQSelOnChange();" >
  2.       <option value="1">你爸爸妈妈都叫你什么小名?</option>
  3.       <option value="2">你最要好的朋友叫什么?</option>
  4.       <option value="3">你最尊敬的老师是?</option>
  5.       <option value="-1" >自定义问题</option>
  6. </select>
  7. <br/>
  8. <input class="inputLen"  type="hidden" name="safeQuestion" id="safeQuestion" size="28"  value="" />

本想实现:
允许用户在下拉列表中选择一项,若选中最后一项“自定义问题”,则文本框可见并设置其焦点;若选其他项,则文本框隐藏并被赋值为选中项的文本。
FF可以正常执行,在IE下却无法设置safeQuestion.type=”text”

原因:

FF下支持input元素.type [ = sType ],IE下input.type属性却是只读的.
官方说法: 在IE中,除了使用createElement方法动态创建的元素,其他情况下,type属性都为只读

解决方案:

改成Style控制显示与否咯…

  1. <script type="text/javascript">
  2.     <!--
  3.     function $(){
  4.         return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
  5.     }
  6.     function safeQSelOnChange()
  7.     {
  8.         if($('safeQuestionSel').value==-1)
  9.         {
  10.             var safeQuestion = $('safeQuestion');
  11.             safeQuestion.style.display = 'block';
  12.             safeQuestion.value="";
  13.             safeQuestion.focus();
  14.         }else{
  15.             var safeQuestion = $('safeQuestion');
  16.             var safeQuestionSel = $('safeQuestionSel');
  17.             safeQuestion.style.display = 'none';
  18.             safeQuestion.value=safeQuestionSel.options[safeQuestionSel.selectedIndex].innerHTML;
  19.         }
  20.     }
  21.     //-->
  22. </script>
  1. <select class="inputLen" name="safeQuestionSel" id="safeQuestionSel" onchange="javascript:safeQSelOnChange();" onblur="javascript:safeQSelOnChange();" >
  2.       <option value="1">你爸爸妈妈都叫你什么小名?</option>
  3.       <option value="2">你最要好的朋友叫什么?</option>
  4.       <option value="3">你最尊敬的老师是?</option>
  5.       <option value="-1" >自定义问题</option>
  6. </select>
  7. <br/>
  8. <input class="inputLen" style="display:none;margin:3px 0 3px 0 " type="text" name="safeQuestion" id="safeQuestion" size="28"  value="" />

延伸阅读


  1. 官方说法: 在IE中,除了使用createElement方法动态创建的元素,其他情况下,type属性都为只读

    貌似动态创建的也不行,你可以试一下