利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

原理就是循环获取网页上的控件，然后设置disabled 属性为true.

代码如下：


代码如下:

<script type="text/javascript">
    var nodeList = document.getElementsByTagName("input");
    for (var i = 0; i < nodeList.length; i++) {
        nodeList[i].disabled = true;
    }
    nodeList = document.getElementsByTagName("select");
    for (var i = 0; i < nodeList.length; i++) {
        nodeList[i].disabled = true;
    }
    nodeList = document.getElementsByTagName("textarea");
    for (var i = 0; i < nodeList.length; i++) {
        nodeList[i].disabled = true;
    }
</script>

下面是这些控件的类型：

通过document.getElementsByName("controlName")[0].type.toLocaleLowerCase()可以获取。

根据控件的不同有下面几种类型：
"text"
"textarea"
"select-one"
"select-multiple"
"radio"
"checkbox"

赞 (0)

相关推荐

  • 基于JavaScript实现动态创建表格和增加表格行数

    在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>

  • javascript实现输出指定行数正方形图案的方法

    javascript实现输出指定行数正方形图案的方法

    本文实例讲述了javascript实现输出指定行数正方形图案的方法.分享给大家供大家参考.具体如下: javascript实现输出指定行数的正方形图案:点击生成图案,会有2个提示框,1,输入图案的组成字符,只能是1个字符哦2,输入正方形行数,路过大于10,会设置为10行数 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd

  • php实现格式化多行文本为Js可用格式

    js里现在存写模板的场景好多,如:弹框类的html代码模板等,js不支持换行的长文本写法,必需要一行行的加起来,如: 复制代码 代码如下: var content = '<div>row 1</div>' + '<div>row 2</div>'; 而不可以写成: 复制代码 代码如下: var content = '<div> row 1</div> <div>row2 </div> '; 于是小加工一php小

  • 用js实现计算代码行数的简单方法附代码

    一段代码可能有几十行,上千个字符,统计其行数可以先把代码字符串化为数组,再返回该数组的长度即可. 传统做法: <textarea name="abc"> 123456 789 </textarea> <script type="text/javascript"> var counter = 0; var str = abc.value; for(i=0; i<str.length; i++) {     if(str.sub

  • js动态生成指定行数的表格

    js动态生成指定行数的表格

    下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 复制代码 代码如下: <table> <tr> <td>动态生成表格</td> <td><input id="Cold" type="text" class="input" size="10" name="Num"/>行</td&g

  • 用JS获得表格当前行数的代码

    table1 table2 table3 table4 table5 table6 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 无标题文档                 document.body.onclick=function(e){ e=e|| window.event; var obj=e.target || e.srcElement; if(obj.tagName=="TD"){ obj=obj.parentNode; } alert(obj.rowInde

  • 用原生js统计文本行数的简单示例

    前言 在开发的时候会遇到这种情况,只显示两行,如果超过两行,则显示一个"显示更多"的按钮,点击按钮来显示剩余行的内容.有个 jQuery 的插件 loadingDots 专门实现了这个功能.不过今天这里我们要用原生的Javascript来实现,要实现这个需求,最关键的是要确定这个容器内文本的行数,得到行数后,修改元素高度,并确定是否显示加载按钮. window.getComputedStyle() 要使用原生 JavaScript 代码获取一个元素的各个 style 属性,使用 win

  • js获取表格的行数和列数的方法

    如何使用JavaScript获取一个表格的行数和列数?其实很简单,假设存在如下表格: <table width="100%" border="1" cellspacing="0" cellpadding="0" id="example_table"> <tr> <td> </td> <td> </td> <td> </

  • 利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

    原理就是循环获取网页上的控件,然后设置disabled 属性为true. 代码如下: 复制代码 代码如下: <script type="text/javascript">    var nodeList = document.getElementsByTagName("input");    for (var i = 0; i < nodeList.length; i++) {        nodeList[i].disabled = true;

  • JavaScript 文本框下拉提示(自动提示)

    文本框下拉提示效果 html{overflow:-moz-scrollbars-vertical;} body{padding:0;margin:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} body,h1,p,blockquote,dl,dt,dd,ul,ol,li,input{margin:0;padding:0;} button,input,select,textarea {font:12px/1.5 tahoma,arial,si

  • 基于JavaScript实现单选框下拉菜单添加文件效果

    基于JavaScript实现单选框下拉菜单添加文件效果

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

  • JS实现下拉菜单赋值到文本框的方法

    JS实现下拉菜单赋值到文本框的方法

    本文实例讲述了JS实现下拉菜单赋值到文本框的方法.分享给大家供大家参考.具体如下: 这里演示下拉菜单和文本框构建的介绍栏,将Select框中的值定位到INPUT文本输入框中,是下拉框赋值到文本框的实例,上网时候貌似经常见的功能,只是不知如何形容,或许叫做联动吧. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-to-input-val-codes/ 具体代码如下: <html> <head> <SCRIP

  • 网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

    网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容 网页布局+纯CSS纵向下拉菜单 *{ margin:0; padding:0; border:0; } html{ background:#bfc4c7;/*背景颜色*/ } body{ font:12px/150% '宋体'; margin:0 auto; width:770px; text-align:center; } #menu,#nav,#footer{ clear:both; } #nav{ padding-left:20px; t

  • JS获取文本框,下拉框,单选框的值的简单实例

    1.文本框 1.1 <input type="text" name="test" id="test"> 通过var t=document.getElementById("test").value把值赋给变量t, 1.2 当然也可以反过来把已知的变量值赋给文本框,例如: var m = "5";document.getElementById("test").value= m;

  • JavaScript结合PHP实现网页制作中双下拉菜单的动态实现

    本文介绍了双下拉菜单的动态实现的代码,例如:在主菜单中有"焦点新闻"."生活时尚"."心情故事"三个选项,通过"焦点新闻"的选择,子菜单自动生成如"国内"."国际"."体育"."文娱",依此类推. 利用javascript,我们可以轻松实现上述效果.但问题是,如果菜单中的选项是从数据库(或其他文件)中动态提取,实现起来就并不是轻而易举的了.笔者根据

  • JavaScript实现网页下拉菜单效果

    JavaScript实现网页下拉菜单效果

    JavaScript(js)网页–下拉菜单制作 在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网 鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏. 设计简单的下拉菜单栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewpor

  • jquery实现很酷的网页顶部图标下拉菜单效果

    jquery实现很酷的网页顶部图标下拉菜单效果

    本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实用的效果,只使用了jquery就实现了.如果你的网站上此前用有jquery插件,那么整合起来就更方便了,点击运行可预览菜单效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-top-ico-show-menu-style-c

  • python tkinter之 复选、文本、下拉的实现

    我就废话不多说了,直接看代码吧! import tkinter as tk from tkinter import ttk win = tk.Tk() win.title("Python GUI") # 添加标题 ttk.Label(win, text="Chooes a number").grid(column=1, row=0) # 添加一个标签0 ttk.Label(win, text="Enter a name:").grid(colum

随机推荐