本文介绍了一种通过JavaScript遍历页面元素来禁用所有控件的方法。代码兼容IE浏览器,支持选择性保留按钮控件,并提供了针对特定Form的调用示例,旨在辅助开发者快速实现表单只读或锁定功能。
JS禁用页面所有控件的方法
本文详细介绍了一种使用JavaScript禁用页面上所有控件的技术方案,供开发者参考。
该方法利用页面元素的特征,通过遍历能够捕获到所有相关元素。
function DisableElements(container,blnHidenButton)
{
if (!container)
return;
var aEle;
if (navigator.appName =="Microsoft Internet Explorer") //IE
{
for (var i=0;i<container.all.length;i++)
{
aEle = container.all[i];
tagName = aEle.tagName.toUpperCase();
if ((tagName=="SELECT"))
{
aEle.disabled = true;
if(tagName=="BUTTON" && blnHidenButton)
{
//aEle.style.display = "none";//对button不做处理
}
}
else if (tagName=="INPUT")
{
if (aEle.type.toUpperCase()!="HIDDEN")
{
if (aEle.type.toUpperCase()=="TEXT")
{
ReadonlyText(aEle);
}
else if (aEle.type.toUpperCase()=="BUTTON")
{
//do nothing;
}
else
{
aEle.disabled = true;
}
}
if((aEle.type.toUpperCase()=="BUTTON"||aEle.type.toUpperCase()=="SUBMIT") && blnHidenButton)
{
//aEle.style.display = "none";//对button不处理
}
}
else if (tagName=="TEXTAREA")
{
ReadonlyText(aEle);
}
}
}
else//非IE浏览器
{
var aEle = container.getElementsByTagName("select");
for (var i=0;i< aEle.length;i++)
{
aEle[i].disabled = true;
}
aEle = container.getElementsByTagName("button");
for (var i=0;i< aEle.length;i++)
{
aEle[i].disabled = true;
}
aEle = container.getElementsByTagName("textarea");
for (var i=0;i< aEle.length;i++)
{
ReadonlyText(aEle[i]);
}
aEle = container.getElementsByTagName("input");
for (var i=0;i< aEle.length;i++)
{
if (aEle[i].type.toUpperCase()!="HIDDEN")
{
if (aEle[i].type.toUpperCase()=="TEXT")
{
ReadonlyText(aEle[i]);
}
else
{
aEle[i].disabled = true;
}
}
if((aEle[i].type.toUpperCase()=="BUTTON"||aEle[i].type.toUpperCase()=="SUBMIT")&&blnHidenButton)
{
aEle[i].style.display = "none";
}
}
}
}
function ReadonlyText(objText)
{
if (objText){
//objText.style.backgroundColor = "menu";
objText.style.background = "#E6E6E6";
//objText.style.color = "black";
objText.readOnly=true;
}
}
实际效果良好。示例中保留了按钮(button)控件,若需同时禁用按钮,可取消代码中的相应注释。
具体调用方式如下所示:
假设存在一个名为formeditor的表单,调用该方法的代码如下:
var myForm=document.forms["formEditor"];
DisableElements(myForm,'true');
完整实例代码可点击此处本站下载。
希望本文所述内容对大家JavaScript程序设计有所帮助。