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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JS request函数 用来获取url参数
May 17 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
Angular中$compile源码分析
Jan 28 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
python实现排序算法
2014/02/14 Python
django 常用orm操作详解
2017/09/13 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python:动态路由的Flask程序代码
2019/11/22 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
大学生求职简历的自我评价
2013/10/14 职场文书
英文简历自荐信范文
2013/12/11 职场文书
财务总经理岗位职责
2014/02/16 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
骨干教师申报材料
2014/12/17 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
员工表扬信怎么写
2015/05/05 职场文书
主持人大赛开场白
2015/05/29 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js