一·由于该控件目前不可见、未启用或类型不允许,因此无法将焦点移向它
此类问题是因为在js中调用了*.focus()方法,而*元素却是一个'hidden'的元素类型,或者*的祖宗节点是被diaplay=none掉的元素,如果此时再调用的话,浏览器报错无法将焦点移向它就不足为怪了。
错误源码如下
<script>
function validateForm(){
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inputValue = inputs[i].value.Trim();
if(inputs[i].type!='submit'&&inputs[i].type!='reset'){
if(inputValue.length!=0){
continue;
}else{
inputs[i].focus();
inputs[i].select();
alert('【'+inputs[i].previousSibling.nodeValue+'】选项不能为空!');
return false;
}
}
}
return true;
}
</script>
因为要对页面的表单进行进行非空验证,因为表单个数太多,所以采用循环办法,为了方便,在校验不通过后,将焦点聚焦在为空的元素上,在应用中有使用了其他的一个自定义的alert()控件,要生成一个div来显示提示信息,在此div中有
var sFunc = '<input id="dialogOk" type="button" style="{width:62px;height:22px;border:solid 1px #475272;background:url(/'' + path + 'smb_btn_bg.gif/');line-height:20px;" value="确认" οnclick="new dialog().reset();" /> <input id="dialogCancel" type="button" style="{width:62px;height:22px;border:solid 1px #475272;background:url(/'' + path + 'smb_btn_bg.gif/');line-height:20px;" value="取消" οnclick="new dialog().reset();" />';
var sClose = '<input type="image" id="dialogBoxClose" οnclick="new dialog().reset();" src="' + path + 'dialogClose0.gif" border="0" width="17" height="17" οnmοuseοver="this.src=/'' + path + 'dialogCloseF.gif/';" οnmοuseοut="this.src=/'' + path + 'dialogClose0.gif/';" align="absmiddle" />';
这么三个input元素,当用户点击这三个按钮之一后将隐藏该div,因为在校验中没有排除对button和image的校验,当然他们是没有value值的,所以要提示框关闭后要将焦点聚焦到dialogOk上自然就报错了。
有两种解决方案:
1.是在关闭提示框后将这三个input元素直接remove掉,那将对原来的页面没有任何影响,在提示是再生成它们
2.if(inputs[i].type!='submit'&&inputs[i].type!='reset')条件改为if(inputs[i].type!='submit'&&inputs[i].type!='reset'&&inputs[i].type!='button'&&inputs[i].type!='image')或者if(input[i].type='text')即可
二·类型不匹配
错误代码如下:
$('dialogOk').parentNode.removeChild('dialogOk');
$('dialogCancel').parentNode.removeChild('dialogCancel');
$('dialogBoxClose').parentNode.removeChild('dialogBoxClose');
显然应改为下面的
$('dialogOk').parentNode.removeChild($('dialogOk'));
$('dialogCancel').parentNode.removeChild($('dialogCancel'));
$('dialogBoxClose').parentNode.removeChild($('dialogBoxClose'));