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

如何在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变大。

 

DHTML 中的介绍：

CONTENTEDITABLE Attribute | contentEditable Property  Internet Development Index

 

Sets or retrieves the string that indicates whether the user can edit the content of the object.

 

Syntax：

HTML <ELEMENT CONTENTEDITABLE = sCanEdit... > 

Scripting object.contentEditable(v) [ = sCanEdit ]

 

Possible Values：

sCanEdit String that specifies or receives one of the following values.inherit Default. Content's ability to be edited by user is inherited from object's parent.

false Content cannot be edited by the user.

true Content can be edited by the user.

 

 

The property is read/write. The property has a default value of inherit.

 

Remarks：

Child elements do not inherit this attribute unless they have layout. Use the hasLayout property to determine if an object has layout.

 

If this attribute is applied to a BODY element, it has the same effect as setting the designMode property of the document object.

 

Elements with the disabled attribute set to false do not respond to the contentEditable attribute.

 

If this attribute is applied to the A element, the default functionality of the A element will be lost while sCanEdit is set to the value of true.

 

If this attribute is applied to the MARQUEE element, the default functionality of the MARQUEE element will be lost while sCanEdit is set to the value of true.

 

Though the TABLE, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, and TR elements cannot be set as content editable directly, a content editable SPAN, or DIV element can be placed inside the individual table cells (TD and TH elements). See the example below.

 

pasteHTML Method  Internet Development Index

 

Pastes HTML text into the given text range, replacing any previous text and HTML elements in the range.

 

Syntax：

TextRange.pasteHTML(sHTMLText)

Parameters

 

sHTMLText Required. String that specifies the HTML text to paste. The string can contain text and any combination of the HTML tags described in HTML Elements.

 

Return Value：

No return value.

 

Remarks：

This method might alter the HTML text to make it fit the given text range. For example, pasting a table cell into a text range that does not contain a table might cause the method to insert a table element. For predictable results, paste only well-formed HTML text that fits within the given text range.

 

This method fails only when used inappropriately to paste HTML into a TEXTAREA element in Microsoft? Internet Explorer 5 and later.

 

This method is accessible at run time. If elements are removed at run time, before the closing tag is parsed, areas of the document might not render.

 

This feature might not be available on non-Microsoft Win32? platforms.