JavaScript DOM 學習第二章 編輯文本
2024-05-06 14:11:30
供稿：網友
例子
這個頁面就是個例子。點擊一個段落，編輯，然后點Ready。你的修改就會呈現。
問題
遇到的第一個問題是：我想用文本框作為編輯區域。一開始我卻把內容放不進文本框去。讀者發現Mozilla的一個警告說是只有在文本框放置到文檔之后才能設置它的value。
另外，在Mozilla下面內容包裝的不是很好。我試了好幾種wrap參數，但是結果都不是很好。
最嚴重的問題就是把修改后的內容發回服務器，這是幾乎所有的CMS系統都要做的。讀者給了我很多高明巧妙的建議。然而因為不能通過JavaScript完成，所以我也不能提供解決辦法。所以也請您不要發郵件告訴你找到了辦法：那也許可行，但是我只想要純JavaScript的不需要服務器端代碼的方法。
腳本
代碼如下:
var editing = false;
if (document.getElementById && document.createElement) {
var butt = document.createElement('BUTTON');
var buttext = document.createTextNode('Ready!');
butt.appendChild(buttext);
butt.onclick = saveEdit;
}
function catchIt(e) {
if (editing) return;
if (!document.getElementById || !document.createElement) return;
if (!e) var obj = window.event.srcElement;
else var obj = e.target;
while (obj.nodeType != 1) {
obj = obj.parentNode;
}
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
obj = obj.parentNode;
}
if (obj.nodeName == 'HTML') return;
var x = obj.innerHTML;
var y = document.createElement('TEXTAREA');
var z = obj.parentNode;
z.insertBefore(y,obj);
z.insertBefore(butt,obj);
z.removeChild(obj);
y.value = x;
y.focus();
editing = true;
}
function saveEdit() {
var area = document.getElementsByTagName('TEXTAREA')[0];
var y = document.createElement('P');
var z = area.parentNode;
y.innerHTML = area.value;
z.insertBefore(y,area);
z.removeChild(area);
z.removeChild(document.getElementsByTagName('button')[0]);
editing = false;
}
document.onclick = catchIt;
