點擊輸入框或文本域可實現編輯的JS代碼_表單按鈕特效

點擊輸入框或文本域可實現編輯，JS將自動判斷是INPUT還是TEXTAREA，當出現編輯狀態時你可以編輯修改文字，完成后點擊其它處，此時JS將數據提交到指定程序進行保存，用好了這個技巧可有效改善你網站的用戶操作體驗。

<!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 mrc = obj.innerHTML;
var html = document.createElement('TEXTAREA');
html.style.width = obj.offsetWidth + "px";
html.style.height = obj.offsetHeight + "px";
obj.innerHTML = "";
html.value = mrc;
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>
<h2>Edit text</h2>
<div  style="background-color:#FFFFCC;width:160px;" onclick="_edit.IN(this,'index.html?act=edit',3)">INPUT單擊可以編輯</div><br />
<div id="mrc" ondblclick="editContent(this,'index.html?act=edit',3)">模板無憂（mb5u.com）提供各類網頁模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質量的學習型源碼下載站。</div>
</pre>
 </BODY>
</HTML>

所屬頻道：表單按鈕特效/更新時間：2012-12-05

[收藏][報錯][返回列表]

相關表單按鈕特效：

點擊輸入框或文本域可實現編輯的JS代碼_表單按鈕特效

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些