在页面初始化加载以下readOnlyPage()方法,可实现所有元素只读,方便实用。

<script language="javascript">
function readOnlyPage(){
elements = document.all;
for ( var i = 0; i < elements.length; i++) {
setReadonlyOfElement(elements[i]);
}
} function setReadonlyOfElement(iElement){
var elementType = iElement.type;
if ((elementType == "hidden") || (elementType == "password") ||
(elementType == "text") || (elementType == "textarea")){
if(iElement.setReadonlyFlag==true){
return;
}else{
iElement.setReadonlyFlag = true;
}
if(iElement.onblur!=null){
iElement.oldOnblur = iElement.onblur;
iElement.onblur = functionDoNothing;
}
if(iElement.ondblclick!=null){
iElement.oldOndblclick = iElement.ondblclick;
iElement.ondblclick = functionDoNothing;
}
if(iElement.onfocus!=null){
iElement.oldOnfocus = iElement.onfocus;
iElement.onfocus = functionDoNothing;
} if(iElement.className!=null){
iElement.oldClassName = iElement.className;
}
iElement.className="readonly";
iElement.readOnly = true;
}
// 不要把按钮设只读
//else if(elementType=="button"){
// if(iElement.setReadonlyFlag==true){
// return;
// }else{
// iElement.setReadonlyFlag = true;
// }
//}
else if(elementType == "checkbox"){
setCheckBoxReadonly(iElement,true);
}
else if(elementType == "radio"){
setRadioReadonly(iElement,true)
}else if(elementType == "select-one"){
if(iElement.setReadonlyFlag==true){
return;
}else{
iElement.setReadonlyFlag = true;
}
var optionTags = new Array();
var index = 0;
var optionObj;
var elementValue = iElement.value;
var tag;
var options = iElement.options;
if(options.length>1){
for(var j = options.length-1; j >= 0; j--){
tag = new Array();
optionObj=options[j];
tag["value"] = optionObj.value;
tag["text"] = optionObj.text;
optionTags[index++] = tag;
if(tag["value"] != elementValue){
iElement.remove(j);
}
}
}
iElement.optionTags = optionTags;
//iElement.className="readonly";
}
} function setCheckBoxReadonly(field,flag)
{
if(flag==true)
{
if(field.setCheckBoxReadonlyFlag!=true)
{
field.setCheckBoxReadonlyFlag=true;
field.oldClassName = field.className;
field.oldOnclick = field.onclick;
field.className = "readonlycheckbox";
field.onclick = functionReturnFalse;
}
}
else
{
if(field.setCheckBoxReadonlyFlag==true)
{
field.className = field.oldClassName;
field.onclick = field.oldOnclick;
field.setCheckBoxReadonlyFlag = false;
}
}
} function setRadioReadonly(field,flag)
{
if(flag==true)
{
if(field.setRadioReadonlyFlag!=true)
{
field.oldClassName = field.className;
field.oldOnfocus = field.onfocus;
field.className = "readonlyradio";
field.onfocus = functionCancelFocus;
field.disabled = true;
}
}
else
{
if(field.setRadioReadonlyFlag==true)
{
field.className = field.oldClassName;
field.onfocus = field.oldOnfocus;
field.setRadioReadonlyFlag = false;
field.disabled = false;
}
}
}
</script>

【JavaScript】Js控制页面所有元素只读的更多相关文章

  1. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  2. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  3. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  4. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  5. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  6. js控制页面显示和表单提交

    早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...

  7. js控制页面显示

    两个菜单切换显示页面内容: js控制代码, /** JS初始化 **/ $(document).ready(function() { $('#email_btn').click(function(){ ...

  8. js控制页面跳转,清缓存,强制刷新页面

    单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...

  9. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

随机推荐

  1. java 一款可以与ssm框架完美整合的web报表控件

    硕正套件运行于客户端(浏览器),与应用服务器(Application Server)技术无关,所以能完全用于J2EE. ASP.Net.php等技术开发的Web应用产品中. 硕正套件部署于服务器,支持 ...

  2. 基于layUI实现前端分页功能

    一.layUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为htt ...

  3. 前端模块化工具--webpack使用感受

    话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...

  4. linux 的一些脑洞操作

    把当前文件夹的文件名用","连接成一行,或者将多行转变为一行 ls | paste -s -d "," # -s 选项将输入进行一次性粘贴 ls | xargs ...

  5. Python进行文本处理

    对于一个文本字符串,可以使用Python的string.split()方法将其切割.下面看看实际运行效果. mySent = 'This book is the best book on python ...

  6. 安装cocoaPods第三方类库

    *1 检测gem 镜像文件     输入指令: gem sources -l     回车后得到镜像地址.可能是一个,也可能有好几个,常见两个如下 https://rubygems.org/     ...

  7. PHP环境搭建——Apache

    1.PHP环境安装前我们需要知道PHP给我们带来的功能是什么? Php主要用在三个领域 (1)       网站和web应用程序 (2)       命令行脚本 (3)       桌面(GUI)应用 ...

  8. webpack模块解析

    前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...

  9. mk-js,一个基于react、nodejs的全栈框架

    前言 在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人说自己搞前端.去年年初接触的react,16年7月份在github开源了一套针对react.redux探索的项目,近期和伙伴们一起 ...

  10. NYOJ--714--Card Trick

    /* Name: NYOJ--714--Card Trick Author: shen_渊 Date: 19/04/17 19:35 Description: 早上训练的第六届河南省程序设计大赛的题, ...