【JavaScript】Js控制页面所有元素只读
在页面初始化加载以下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控制页面所有元素只读的更多相关文章
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- js 控制页面跳转的5种方法
js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- js控制页面显示和表单提交
早期的web页面在显示方面一般在后台进行控制,虽然对后台开发来讲是比较容易做到的,但是涉及到一个问题,那就是数据库压力. 因为要控制显示,所以会比较频繁的从数据库中来回调用. 现在的js功能越来越强, ...
- js控制页面显示
两个菜单切换显示页面内容: js控制代码, /** JS初始化 **/ $(document).ready(function() { $('#email_btn').click(function(){ ...
- js控制页面跳转,清缓存,强制刷新页面
单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...
- javascript 获取父页面中元素对象方法
父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...
随机推荐
- Ambari安装之Ambari安装前准备(CentOS6.5)(一)
优秀博客 <Ambari--大数据平台的搭建利器> Ambari安装前准备 (一)机器准备 192.168.80.144 ambari01 (部署Ambari-server和Mirro ...
- PHP树结构,实现无限分级
一.从数据库查出来的数据需要id.parentid.level. id唯一识别栏目,parentid为该栏目所属父类id,level标示该栏目是几级栏目.以下代码就可以实现一个简单的树结构. publ ...
- Laravel 日志查看器 导入log-viewer扩展
1.修改配置文件 config\app.php中 'log'=>'daily' 日志文件是按天生成的 2.在项目目录中composer命令安装扩展:composer require arcan ...
- (转)Dom4J解析
xml文档: <?xml version="1.0" encoding="UTF-8"?> <书架> <书 出版社="清 ...
- 初学Python(七)——控制语句
初学Python(七)——控制语句 初学Python,主要整理一些学习到的知识点,这次是控制语句. if : #-*- coding:utf-8 -*- age=raw_input('input yo ...
- 50. leetcode 520. Detect Capital
520. Detect Capital Given a word, you need to judge whether the usage of capitals in it is right or ...
- 22. leetcode 242. Valid Anagram(由颠倒字母顺序而构成的字)
22. 242. Valid Anagram(由颠倒字母顺序而构成的字) Given two strings s and t, write a function to determine if t i ...
- Ubuntu系统的安装Sublime3
1.添加Sublime-text-3软件包的软件源 sudo add-apt-repository ppa:webupd8team/sublime-text-3 2.使用以下命令更新系统软件源 ...
- Restful接口调用方法超详细总结
由于在实际项目中碰到的restful服务,参数都以json为准.这里我获取的接口和传入的参数都是json字符串类型.发布restful服务可参照文章http://www.cnblogs.com/jav ...
- Can not issue data manipulation statements with executeQuery().解决的方法
query是查询用的,而update是插入和更新,删除修改用的. executeQuery()语句是用于产生单个结果集的语句,如select语句,在什么情况下用,当你的数据库已经保存了数据后,要进行查 ...