单击、双击div进入编辑状态
2015-05-19 10:01
513 查看
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
var _edit =
{
IN: function (obj, act, id) {
var tag = obj.firstChild.tagName;
if (typeof(tag) != "undefined" && (tag == "INPUT" || tag == "TEXTAREA"))return;
var org = obj.innerHTML;
var orglen = org.replace(/[^\x00-\xff]/g,'**').length;
if (obj.offsetHeight <= 22) {
var val = window.ActiveXObject ? obj.innerText : obj.textContent;
var txt = document.createElement("INPUT");
txt.value = val;
txt.style.background = "#FFC";
txt.style.width = obj.offsetWidth + "px" ;
obj.innerHTML = "";
obj.appendChild(txt);
txt.focus();
txt.onblur = function(e){
obj.innerHTML = txt.value;
_edit.QUERY(act,txt.value);
return false;
}
return false;
}else{
var content = obj.innerHTML;
var html = document.createElement('TEXTAREA');
html.style.width = obj.offsetWidth + "px";
html.style.height = obj.offsetHeight + "px";
obj.innerHTML = "";
html.value = content;
obj.appendChild(html);
html.focus();
html.onblur = function(e){
obj.innerHTML = html.value;
_edit.QUERY(act,obj.innerHTML);
}
return false;
}
},
QUERY: function (url,postData) {
var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : false);
if (!req) alert("Unable to creat an XMLHttpRequest");
var method = (postData) ? "POST" : "GET";
req.open(method,url,true);
if (postData)req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState == 4) {
if(req.status == 200) {
var message = req.responseText;
if(message)alert(message);
}else{
alert("There was a problem with the request " + req.status);
}
}
}
req.send(postData);
}
}
var editContent = _edit.IN;
// -->
</script>
</head>
<body>
<div style="width:160px;" onclick="_edit.IN(this,'index.html?act=edit',3)">单击编辑</div><br />
<div id="content" ondblclick="editContent(this,'index.html?act=edit',3)">双击这儿也可以编辑哦，试试？</div>
</BODY>
</HTML>
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
var _edit =
{
IN: function (obj, act, id) {
var tag = obj.firstChild.tagName;
if (typeof(tag) != "undefined" && (tag == "INPUT" || tag == "TEXTAREA"))return;
var org = obj.innerHTML;
var orglen = org.replace(/[^\x00-\xff]/g,'**').length;
if (obj.offsetHeight <= 22) {
var val = window.ActiveXObject ? obj.innerText : obj.textContent;
var txt = document.createElement("INPUT");
txt.value = val;
txt.style.background = "#FFC";
txt.style.width = obj.offsetWidth + "px" ;
obj.innerHTML = "";
obj.appendChild(txt);
txt.focus();
txt.onblur = function(e){
obj.innerHTML = txt.value;
_edit.QUERY(act,txt.value);
return false;
}
return false;
}else{
var content = obj.innerHTML;
var html = document.createElement('TEXTAREA');
html.style.width = obj.offsetWidth + "px";
html.style.height = obj.offsetHeight + "px";
obj.innerHTML = "";
html.value = content;
obj.appendChild(html);
html.focus();
html.onblur = function(e){
obj.innerHTML = html.value;
_edit.QUERY(act,obj.innerHTML);
}
return false;
}
},
QUERY: function (url,postData) {
var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : false);
if (!req) alert("Unable to creat an XMLHttpRequest");
var method = (postData) ? "POST" : "GET";
req.open(method,url,true);
if (postData)req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.onreadystatechange = function () {
if (req.readyState == 4) {
if(req.status == 200) {
var message = req.responseText;
if(message)alert(message);
}else{
alert("There was a problem with the request " + req.status);
}
}
}
req.send(postData);
}
}
var editContent = _edit.IN;
// -->
</script>
</head>
<body>
<div style="width:160px;" onclick="_edit.IN(this,'index.html?act=edit',3)">单击编辑</div><br />
<div id="content" ondblclick="editContent(this,'index.html?act=edit',3)">双击这儿也可以编辑哦，试试？</div>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- swing jtable 单元编辑事件（包括通过键盘获取焦点后编辑和鼠标双击后进入编辑状态）
- table单击进入编辑状态、失去焦点发送数据到后台
- Flex中如何给DataGrid控件的项目添加一个可编辑TextArea/TextInput，单击控件内的项目时，自动进入编辑状态
- Flex中如何给DataGrid控件的项目添加一个可编辑TextArea/TextInput，单击控件内的项目时，自动进入编辑状态
- JTable只要一双击就进入编辑状态,禁止的方法实现
- esayui 编辑单元格 双击编辑一个单元格，不是一行，单击其他后，关闭编辑状态，单击双击编辑可以任意调整
- UltraWebGrid 单击单元格进入编辑状态
- 在双击控件进入到程序代码编辑界面后，没写东西不影响运行，但删除后报错
- html中a标签href属性的一个坑(二)-a标签双击可编辑状态下问题
- 双击直接编辑状态
- 实现双击进入编辑，失去焦点后保存数据（Angular）
- input双击可以编辑，单击后还原不可编辑状态
- 《怎样进入文件夹选项(用鼠标左键单击总是打开文件,怎么改为双击打开)》
- OO ALV常用功能完整简例(热键单击，双击，帮助，编辑,自定义工具条等）
- 请教 JTable 里的单元格如何使得双击进入单元格后，单元格的内容处于全选中状态
- html页面双击表格单元格，成编辑状态。实例
- 在DBGrid中可选中行而又可进入编辑状态
- 文章只要修改或编辑就进入不可见状态?
- jQuery 单击编辑 双击编辑 保存
- JS实现双击编辑可修改状态的方法