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 DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
小程序实现tab标签页
Nov 16 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php的socket编程详解
2016/11/20 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
Angular2库初探
2017/03/01 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Django model update的多种用法介绍
2020/03/28 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
幼儿教育感言
2014/02/05 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2015毕业寄语大全
2015/02/26 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
信仰观后感
2015/06/03 职场文书
百年孤独读书笔记
2015/06/29 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python