在页面初始化加载以下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. 30分钟学会使用Spring Web Services基础开发

    时隔一年终于又推出了一篇30分钟系列,上一篇<30分钟学会反向Ajax>是2016年7月的事情了.时光荏苒,岁月穿梭.虽然一直还在从事Java方面的开发工作,但是私下其实更喜欢使用C++. ...

  2. 【转载】BAT 批处理脚本教程

    来源:http://www.cnblogs.com/glaivelee/archive/2009/10/07/1578737.html BAT 批处理脚本 教程   第一章 批处理基础第一节 常用批处 ...

  3. hdu_3336: Count the string(KMP dp)

    题目链接 题意:求给定字符串中,可以与某一前缀相同的所有子串的数量 做这道题需要明白KMP算法里next[]数组的意义 首先用一数组nex[](这里与之前博客中提到的next明显不同)存储前缀后缀最长 ...

  4. 一个Web 持续集成工作实践

    一个web的持续基础实践: https://mp.weixin.qq.com/src=3&timestamp=1494325174&ver=1&signature=wFVC0E ...

  5. Framework7 索引列表插件的问题

    前言 Framework7 作为移动端的开发框架的优良之处已经无需多言.现在已经有了 React 和 Vue 版本,之前在项目中用过 F7 + vue 的开发方式,无论是效率还是产出都近乎完美.有时间 ...

  6. Android studio java.lang.UnsatisfiedLinkError

    最近开始转android Studio 本来以为新的开发工具会大大的提高效率 .结果我错了.今天踩了一天的坑. 我的项目中用到了so的文件.通常情况下在 eclipse中我们在libs/armeabi ...

  7. Pandas: 如何将一列中的文本拆分为多行? | Python

    Pandas: 如何将一列中的文本拆分为多行? 在数据处理过程中,经常会遇到以下类型的数据: 在同一列中,本该分别填入多行中的数据,被填在一行里了,然而在分析的时候,需要拆分成为多行. 在上图中,列名 ...

  8. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  9. Python爬虫初学(三)—— 模拟登录知乎

    模拟登录知乎 这几天在研究模拟登录, 以知乎 - 与世界分享你的知识.经验和见解为例.实现过程遇到不少疑问,借鉴了知乎xchaoinfo的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...

  10. 29. leetcode 167. Two Sum II - Input array is sorted

    167. Two Sum II - Input array is sorted Given an array of integers that is already sorted in ascendi ...