在页面初始化加载以下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. Android 自定义 permission

    Android 自定义 permission Android 添加自定义权限 permission-tree 权限的根节点,3个成员都要定义 name 一般来说需要2个".":比如 ...

  2. 51nod_1298:圆与三角形(计算几何)

    题目链接 判断圆和三角形是否相交   可以转化为   判断三条线段是否和圆相交 #include<iostream> #include<cstdio> #include< ...

  3. 安装Scala-2.11.7——集群学习日记

    前言 在安装Spark之前,我们需要安装Scala语言的支持.在此我选择的是scala-2.11.7版本. scala-2.11.7下载 为了方便,我现在我的SparkMaster主机上先安装,把目录 ...

  4. centos7下编译安装mysql

    推荐: http://www.cnblogs.com/yunns/p/4877333.html

  5. oracle高级查询(实例基于scott用户四张表)

    oracle高级查询(实例基于scott用户四张表) 分组查询 多表查询 子查询 综合实例 ====================================================== ...

  6. GetConsoleScreenBufferInfo 函数--获取控制台屏幕缓冲区信息

    GetConsoleScreenBufferInfo函数 来源:https://msdn.microsoft.com/en-us/library/ms683171(v=vs.85).aspx 作用 获 ...

  7. HTTP权威指南-连接管理

    现在已经开始学习到第四章咯,坚持就是胜利哟~!ok,废话少说,继续写笔记. 本章中我们要介绍到HTTP的连接.好,现在有几个问题,我列出来了,带着这几个问题,我们进入本章的学习. 1.HTTP是如何使 ...

  8. java调用wkhtmltopdf生成pdf文件,美观,省事

    最近项目需要导出企业风险报告,文件格式为pdf,于是搜了一大批文章都是什么Jasper Report,iText ,flying sauser ,都尝试了一遍,感觉不是我想要的效果, 需要自己调整好多 ...

  9. [JAVASCRIPT]实现页面复制至电脑剪贴板

    一. 方法 方1: window.clipboarddata  可惜不支持chrome , chrome 下会提示找不到 clipboarddata 对象 方2: 采用国外大牛写的ZeroClipbo ...

  10. HTML5 开发APP( 支付宝支付)

    我们搞app有一个重要的功能那就是支付功能.无论是微信支付,支付宝,还是银联支付总要有一样支付手段来支持我们网上付款.实现完整的功能.我们公司app的支付方式经过大家开会讨论选择了支付宝支付(其实是当 ...