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中的void运算符语法及使用介绍
Mar 10 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Vue.js组件通信的几种姿势
Oct 23 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
WHOIS类的修改版
2006/10/09 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python删除n行后的其他行方法
2019/01/28 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
final, finally, finalize的区别
2012/03/01 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
公司内部升职自荐信
2015/03/27 职场文书
全陪导游词开场白
2015/05/29 职场文书
成绩单家长意见
2015/06/03 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js