今天遇到一处错误,发现IE中input元素的.type为只读!
相关形容:
ie下input元素的.type无法动态设置;
input.type=”hidden”;
IE中input无法在text和hidden间动态改变;
问题描述:
有这么一段:
<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=":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="" />