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 对象成员的可见性说明
Oct 16 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
vue backtop组件的实现完整代码
Apr 07 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Python打印不合法的文件名
2020/07/31 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
家长给孩子的评语
2014/01/30 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
树转促学习心得体会
2014/09/10 职场文书
建设工程授权委托书
2014/09/22 职场文书
全陪导游词
2015/02/04 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
为自己工作观后感
2015/06/11 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书