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 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
python正则-re的用法详解
2019/07/28 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
如何用Python 加密文件
2020/09/10 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
热能动力工程毕业生自荐信
2013/11/07 职场文书
高一化学教学反思
2014/02/05 职场文书
学校春季防火方案
2014/06/08 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
诚实守信主题班会
2015/08/13 职场文书