点击输入框或文本域可实现编辑的JS代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="background-color:#FFFFCC;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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

点击输入框或文本域可实现编辑的JS代码

分类

表单按钮

描述

点击输入框或文本域可实现编辑，JS将自动判断是INPUT还是TEXTAREA，当出现编辑状态时你可以编辑修改文字，完成后点击其它处，此时JS将数据提交到指定程序进行保存，用好了这个技巧可有效改善你网站的用户操作体验。