JS禁用页面上所有控件的实现方法(附demo源码下载)


Posted in Javascript onDecember 17, 2015

本文实例讲述了JS禁用页面上所有控件的实现方法。分享给大家供大家参考,具体如下:

利用页面元素的特征,可以捕捉到所有元素。

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全部保留了,如果想将button也禁用掉,可以将注释去掉。

调用代码:

假设有个name为formeditor的form,调用方法如下:

var myForm=document.forms["formEditor"];
DisableElements(myForm,'true');

完整实例代码点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
js转html实体的方法
Sep 27 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JS学习笔记之数组去重实现方法小结
May 29 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
jQuery选择器用法实例详解
Dec 17 #Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 #Javascript
js倒计时简单实现方法
Dec 17 #Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
JS函数的几种定义方式分析
Dec 17 #Javascript
js实现文字闪烁特效的方法
Dec 17 #Javascript
基于jquery实现省市联动特效
Dec 17 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
js身份证验证超强脚本
2008/10/26 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python随机取list中的元素方法
2018/04/08 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python 从attribute到property详解
2020/03/05 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
大学生村官工作感言
2014/01/10 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
选秀节目策划方案
2014/06/06 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
合同意向书范本
2014/07/30 职场文书
2015年行政工作总结范文
2015/04/09 职场文书