开发学院网页设计 JavaScript JavaScript DOM学习第二章：编辑文本阅读

JavaScript DOM学习第二章：编辑文本

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示：问题遇到的第一个问题是：我想用文本框作为编辑区域，一开始我却把内容放不进文本框去，JavaScript DOM学习第二章：编辑文本，读者发现Mozilla的一个警告说是只有在文本框放置到文档之后才能设置它的value，另外，所以我也不能提供解决办法，所以也请您不要发邮件告诉你找到了办法：那也许可行，在Mozilla下面

问题

遇到的第一个问题是：我想用文本框作为编辑区域。一开始我却把内容放不进文本框去。读者发现Mozilla的一个警告说是只有在文本框放置到文档之后才能设置它的value。

另外，在Mozilla下面内容包装的不是很好。我试了好几种wrap参数，但是结果都不是很好。

最严重的问题就是把修改后的内容发回服务器，这是几乎所有的CMS系统都要做的。读者给了我很多高明巧妙的建议。然而因为不能通过 JavaScript完成，所以我也不能提供解决办法。所以也请您不要发邮件告诉你找到了办法：那也许可行，但是我只想要纯JavaScript的不需要服务器端代码的方法。

脚本

01　var　editing　　=　false; 02　　 03　if　(document.getElementById　&&　document.createElement)　{ 04　　　　　var　butt　=　document.createElement('BUTTON'); 05　　　　　var　buttext　=　document.createTextNode('Ready!'); 06　　　　　butt.appendChild(buttext); 07　　　　　butt.onclick　=　saveEdit; 08　} 09　　 10　function　catchIt(e)　{ 11　　　　　if　(editing)　return; 12　　　　　if　(!document.getElementById　||　!document.createElement)　return; 13　　　　　if　(!e)　var　obj　=　window.event.srcElement; 14　　　　　else　var　obj　=　e.target; 15　　　　　while　(obj.nodeType　!=　1)　{ 16　　　　　　　　　obj　=　obj.parentNode; 17　　　　　} 18　　　　　if　(obj.tagName　==　'TEXTAREA'　||　obj.tagName　==　'A')　return; 19　　　　　while　(obj.nodeName　!=　'P'　&&　obj.nodeName　!=　'HTML')　{ 20　　　　　　　　　obj　=　obj.parentNode; 21　　　　　} 22　　　　　if　(obj.nodeName　==　'HTML')　return; 23　　　　　var　x　=　obj.innerHTML; 24　　　　　var　y　=　document.createElement('TEXTAREA'); 25　　　　　var　z　=　obj.parentNode; 26　　　　　z.insertBefore(y,obj); 27　　　　　z.insertBefore(butt,obj); 28　　　　　z.removeChild(obj); 29　　　　　y.value　=　x; 30　　　　　y.focus(); 31　　　　　editing　=　true; 32　} 33　　 34　function　saveEdit()　{ 35　　　　　var　area　=　document.getElementsByTagName('TEXTAREA')[0]; 36　　　　　var　y　=　document.createElement('P'); 37　　　　　var　z　=　area.parentNode; 38　　　　　y.innerHTML　=　area.value; 39　　　　　z.insertBefore(y,area); 40　　　　　z.removeChild(area); 41　　　　　z.removeChild(document.getElementsByTagName('button')[0]); 42　　　　　editing　=　false; 43　} 44　　 45　document.onclick　=　catchIt;