HTML编辑控件在分桢情况下DEL键失效的问题。

编辑控件 editbox.htc
-----------------------------------------------------------------------------
<public:component tagName=editBox>
<public:defaults viewLinkContent/> 
</public:component>
 
<div unselectable="on" align=center style="height:250; width:425; background-color:powderblue; border:outset powderblue">
  <br>
  <div id=foo contenteditable align=left 
   style="height:200; width:370;background-color:white; font-face:Arial; padding:3; 
   border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">
  </div>
  <br>
 
  <button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="粗体">
   <B>B</B></button>
  <button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'    
   style="background-color:powderblue; border-color:powderblue" title="斜体">
   <B><I>I</I></B></button>
  <button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'
   style="background-color:powderblue; border-color:powderblue;" title="下划线">
   <B><U>U</U></B></button>
<button unselectable="On" onclick='document.execCommand("StrikeThrough");foo.focus();'
   style="background-color:powderblue; border-color:powderblue; text-decoration=line-through"
   title="删除线">
   <B>S</B></button>
  &nbsp;&nbsp;
 
  <button unselectable="On" onclick='document.execCommand("SuperScript");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="上标">
   <B>^</B></button>
  <button unselectable="On" onclick='document.execCommand("SubScript");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="下标">
   <B>_</B></button>
  &nbsp;&nbsp;
 
  <button unselectable="On" onclick='document.execCommand("InsertOrderedList");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="已排序列表">
   <B>OL</B></button>
  <button unselectable="On" onclick='document.execCommand("InsertUnorderedList");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="未排序列表">
   <B>UL</B></button>
  <button unselectable="On" onclick='document.execCommand("Outdent");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="突出">
   <B>&lt;&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("Indent");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="缩进">
   <B>&gt;&gt;</B></button>
  &nbsp;&nbsp;
 
  <button unselectable="On" onclick='document.execCommand("JustifyLeft");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="左对齐">
   <B>|&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyRight");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="右对齐">
   <B>&gt;|</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="居中">
   <B>&gt;|&lt;</B></button>
  &nbsp;&nbsp;
  <br>
 
  <button unselectable="On" onclick='document.execCommand("Cut");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>剪切</B></button>
  <button unselectable="On" onclick='document.execCommand("Copy");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>复制</B></button>
  <button unselectable="On" onclick='document.execCommand("Paste")'
   style="background-color:powderblue; border-color:powderblue"><B>粘贴</B></button>
  &nbsp;&nbsp;
  <button unselectable="On" onclick='document.execCommand("Overwrite");foo.focus();'
   style="background-color:powderblue; border-color:powderblue"><B>覆盖</B></button>
</div>调用页面editbox.htm
------------------------------------------------------------------------------
<html xmlns:x>
<head>
<title>编辑控件</title>
<?import namespace=x implementation="editBox.htc" />
</head>
<body>
<form>
<table border='0' align='center'>
<tr><td align="center">
<x:editbox ID="EDITBOX" />
</td></tr>
</table>
</form>
</body>
</html>分桢框架
------------------------------------------------------------------
<html>
<head>
<title>分桢</title>
</head>
<frameset cols="100,*" >
<frame src="about:blank" >
<frame src="editbox.htm" >
</frameset>
</html>------------------------------------------------------
将这三个页面保存下来，放于同一目录。运行editbox.htm,一切正常；运行frame.htm，毛病出来了。

解决方案 »

  1.   

    呵呵，挺有意思的，不过找不到哪里的毛病，是不是浏览器本身或者htc本身的问题，帮你顶吧
      

  2.   

    估计是HTC的问题。因为编辑控件如果不做成HTC的形式，而单纯作为页面的一部分，那么不管这个页面是否为分桢，多少重的分桢，都没有丝毫的问题！但假如是HTC的问题，难道微软那帮高手不知道吗？就没有一点办法解救吗？我怀疑是在分桢情况下，可能桢页面的某些操作或消息被屏蔽了。我无意中发现，如果调用HTC的页面还有一些文本框，比如 <input type=text name=txt1>,那么采用如下方法，就会部分地纠正上述问题： var rng = document.Form1.txt1.createTextRange();
    rng.move("textedit");
    rng.select();
    document.Form1.txt1.focus();则在这个编辑控件里，DEL键就可以使用，但又不完全正常，比如你选定一块，按DEL，常理应该是选定的块全删掉，但现在是一个字一个字地删，一次删一个。
      

  3.   

    嗯，楼主分析的有道理，可能是htc的一个bug，给你顶上去，等着高手来解答