如何在html页面中的textbox框输入html标签（转由Rickel Huang ）

如何在html页面中的textbox框输入html标签

Rickel Huang 2005-4-18

今天解决的一个问题 ，需要在一个 textbox 框中输入 html 标签，并显示得到的效果。

方法：

       在一个 td 中嵌套一个 DIV 元素，设置 Div 元素标签属性 CONTENTEDITABLE ，这样该 Div 标签就可以编辑了，用此方法模拟textbox

一个问题在于你如果直接输入 ”<>” 这样的标签时无法得到想要的效果的，所以必须使用 pasteHTML 的方法来实现所见即所得的效果。

对于 pasteHTML 方法，只对 TextRange 有效， so 需要先在该 Div 中 creatRange() 以获得一个 range 。

以下是今天使用到的代码：

< table  id ="tblTest" >
    < tr >
       < td  style ="BORDER-RIGHT:#000000 1px solid; PADDING-RIGHT:2px; BORDER-TOP:#000000 1px solid; PADDING-LEFT:2px; PADDING-BOTTOM:2px; BORDER-LEFT:#000000 1px solid; WIDTH:790px; PADDING-TOP:2px; BORDER-BOTTOM:#000000 1px solid" >

          < DIV  ID ='DivMailName'  CONTENTEDITABLE ="true"  onkeypress  = "if(window.event.keyCode==13) window.event.returnValue=false;" >

         </ DIV >
       </ td >
</ tr >
</ table >

 

--- 加入效果的代码：

 1                             var  o  =  document.all('DivMailName');
 2
 3                             o.focus();
 4
 5                              var  sel  =  document.selection;
 6
 7                              var  b  =  sel.createRange();
 8
 9                             b.pasteHTML(szHTML);
10

 

onkeypress 部分主要是屏蔽回车键，以避免 div 变大。