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

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

问题描述:
有这么一段js:

<script type="text/javascript">
    <!--
    function $(){
        return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
    }
    //...
    function safeQSelOnChange()
    {
        if($('safeQuestionSel').value==-1)
        {
            var safeQuestion = $('safeQuestion');
            safeQuestion.input="text";
            safeQuestion.value="";
            safeQuestion.focus();
        }else{
            var safeQuestion = $('safeQuestion');
            var safeQuestionSel = $('safeQuestionSel');
            safeQuestion.input="hidden";
            safeQuestion.value=safeQuestionSel.options[safeQuestionSel.selectedIndex].innerHTML;
        }
    }
    //-->
</script>
配合这么一段html:

<select class="inputLen" name="safeQuestionSel" id="safeQuestionSel" onchange="javascript:safeQSelOnChange();" onblur="javascript:safeQSelOnChange();" >
      <option value="1">你爸爸妈妈都叫你什么小名?</option>
      <option value="2">你最要好的朋友叫什么?</option>
      <option value="3">你最尊敬的老师是?</option>
      <option value="-1" >自定义问题</option>
</select>
<br/>
<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控制显示与否咯…

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