请问能否模拟出ctrl+F执行的查找操作？

<font color=#ffffff>查找字符 ：</font><input type="text" value="一个" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">
<script>
var rg = document.all.textbox.createTextRange(); function findText(tw) 
{ if(tw=="") 
return; 
var sw = 0; 
if(document.selection) 
{ 
sw = document.selection.createRange().text.length; 
} 
//alert(rg.text)
rg.moveEnd("character",document.all.textbox.value.length); 
rg.moveStart("character",sw); if(rg.findText(tw)) 
{ 
rg.select(); 
} 
if(rg.text!=tw) 
{ 
 alert("已经搜索完了") 
 rg = document.all.textbox.createTextRange() 
} } 
</script>
我做了一个简单的触摸屏程序，是采用iframe嵌套制作的，主界面上嵌套了一个iframe用来显示文章的内容。因为有的文章比较长，现在用户希望制作一个查找功能，在界面上模拟出一个小键盘，可以输入数字来查找定位文章的内容，就好像我们平时看网页时按Ctr+F3出现的东西，只不过要完全在web界面上模拟出来。我总结一下希望实现的效果：
在web界面上有一个文本框，一个按钮。一个模拟出来的小键盘。通过模拟键盘输入数字到文本框上显示。点按钮就可以定位到文章的具体位置。
请教高手如何实现，谢谢！

解决方案 »

  1.   

    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Find and Replace Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <body>
    <script>
    <!--
    var iFlag;
    function search() {
     var wPopupElements=wPopup.document.all;
     if (wPopupElements.textcase.checked)
      {iFlag=4;}
     else
      {iFlag=0;}
     if (wPopupElements.searchtext.value==null || wPopupElements.searchtext.value=='')
      {
       wPopup.alert("Specify a value to search for");
       return;
      }
     if (rng.findText(wPopupElements.searchtext.value,10000,iFlag)==true)
      {
       rng.select();
       rng.scrollIntoView();
       rng.moveStart("character");
      }
     else 
      {wPopup.alert("End of document");}
    }function replace() {
     var wPopupElements=wPopup.document.all;
     if (wPopupElements.textcase.checked)
      {iFlag=4;}
     else
      {iFlag=0;}
     if (wPopupElements.searchtext.value==null || wPopupElements.searchtext.value=='')
      {
       wPopup.alert("Specify a value to replace for");
       return;
      }
     if (rng.findText(wPopupElements.searchtext.value,-10000,iFlag)==true)
      {
       rng.text = wPopupElements.replacetext.value;
      }
     else 
      {wPopup.alert("End of document");}
    }function replaceall() {
     var rng = document.body.createTextRange();
     var wPopupElements=wPopup.document.all;
     if (wPopupElements.textcase.checked)
      {iFlag=4;}
     else
      {iFlag=0;}
     if (wPopupElements.searchtext.value==null || wPopupElements.searchtext.value=='')
      {
       wPopup.alert("Specify a value to replace for");
       return;
      }
      for (i=0; rng.findText(wPopupElements.searchtext.value,10000,iFlag)!=false; i++)
      {
       rng.scrollIntoView();
       rng.text = wPopupElements.replacetext.value;
      }
      setTimeout('wPopup.alert(i + " item(s) replaced!")',200);
    }
    //-->
    </script><script>
    <!--
    function gofind() {
    wPopup=window.open('about:blank','','width=350 height=110 left=200 top=200 menubar=no resizeable=no scrollbars=no toolbar=no');
    var wPopupDoc=wPopup.document;
    wPopupDoc.open();
    wPopupDoc.write('<html>\n');
    wPopupDoc.write('<head>\n');
    wPopupDoc.write('<title>Find and Replace</title>\n');
    wPopupDoc.write('<style>\n');
    wPopupDoc.write('* {font-size:11px;font-family:"Tahoma","Verdana","Arial"}\n');
    wPopupDoc.write('button {width:80}\n');
    wPopupDoc.write('</style>\n');
    wPopupDoc.write('</head>\n');
    wPopupDoc.write('<body bgcolor="buttonface" leftmargin="0" topmargin="0">\n');
    wPopupDoc.write('<table width="350" border="0" cellspacing="0" cellpadding="3" bgcolor="buttonface">\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td>Find what:</td>\n');
    wPopupDoc.write('<td><input type="text" name="searchtext" onchange="window.opener.rng=window.opener.document.body.createTextRange()"></td>\n');
    wPopupDoc.write('<td><button accesskey="S" name="searchbutton" onclick="window.opener.search()"><u>S</u>earch</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td>Replace with:</td>\n');
    wPopupDoc.write('<td><input type="text" name="replacetext"></td>\n');
    wPopupDoc.write('<td><button accesskey="R" name="replacebutton" onclick="window.opener.replace()"><u>R</u>eplace</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td colspan="2"><input type="checkbox" name="textcase" value="textcase">Match Case</td>\n');
    wPopupDoc.write('<td><button accesskey="A" name="replaceallbutton" onclick="window.opener.replaceall()">Replace<u>A</u>ll</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td colspan="2">&nbsp;</td>\n');
    wPopupDoc.write('<td><button accesskey="C" name="cancelbutton" onclick="window.close()"><u>C</u>ancel</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('</table>\n');
    wPopupDoc.write('</body>\n');
    wPopupDoc.write('</html>\n');
    wPopupDoc.close();
    }
    //-->
    </script>
    <button onclick="gofind()">Find and Replace</button><pre>
    A textbox is defined by one or more sets of numbers specifying (in order) the left, top, right, 
    and bottom points of the rectangle. Multiple sets are delimited by a semicolon. 
    The default value is the same dimension value as the containing rectangle.
    If more than one textbox is defined, the comma-delimited quadruple sets that define each textbox are separated by semicolons.
    Normally textboxes come in sets of 1, 2, 3, or 6 rectangles on a shape.</pre>
    </body>
    </html>
      

  2.   

    楼上的高手实现了我说的功能，但我不希望弹出一个新窗口,请问能否在一个窗口里实现呢?在主页面查找iframe里面的东西.
      

  3.   

    目前主要就是不清楚怎么从主页面上查找iframe里的内容?是取iframe的id?
      

  4.   

    根据 yzyun(AMANI NAKUPENDA~WE~)大侠我做出来的效果www.bjcan.com/hengxing/more.asp点一文章进去做查找操作
      

  5.   

    /*
    搜索文字核心程序
    */
    <!--
    var iFlag;
    function search() {
     var wPopupElements=wPopup.document.all;
     if (wPopupElements.textcase.checked)
      {iFlag=4;}
     else
      {iFlag=0;}
     if (wPopupElements.searchtext.value==null || wPopupElements.searchtext.value=='')
      {
       wPopup.alert("请输入你要查找的文字");
       return;
      }
     if (rng.findText(wPopupElements.searchtext.value,10000,iFlag)==true)
      {
       rng.select();
       rng.scrollIntoView();
       rng.moveStart("character");
      }
     else 
      {wPopup.alert("已查找到文档底部");}
    }function replace() {
     var wPopupElements=wPopup.document.all;
     if (wPopupElements.textcase.checked)
      {iFlag=4;}
     else
      {iFlag=0;}
     if (wPopupElements.searchtext.value==null || wPopupElements.searchtext.value=='')
      {
       wPopup.alert("请输入你要替换的文字");
       return;
      }
     if (rng.findText(wPopupElements.searchtext.value,-10000,iFlag)==true)
      {
       rng.text = wPopupElements.replacetext.value;
      }
     else 
      {wPopup.alert("已替换到文档底部");}
    }function replaceall() {
     var rng = document.body.createTextRange();
     var wPopupElements=wPopup.document.all;
     if (wPopupElements.textcase.checked)
      {iFlag=4;}
     else
      {iFlag=0;}
     if (wPopupElements.searchtext.value==null || wPopupElements.searchtext.value=='')
      {
       wPopup.alert("请输入你要替换的文字");
       return;
      }
      for (i=0; rng.findText(wPopupElements.searchtext.value,10000,iFlag)!=false; i++)
      {
       rng.scrollIntoView();
       rng.text = wPopupElements.replacetext.value;
      }
      setTimeout('wPopup.alert("共有"+i + " 项被替换")',200);
    }
    //-->
    /*
    弹出搜索窗口程序
    */
    <!--
    function gofind() {
    wPopup=window.open('about:blank','','width=300 height=108 left=350 top=200 menubar=no resizeable=no scrollbars=no toolbar=no');
    var wPopupDoc=wPopup.document;
    wPopupDoc.open();
    wPopupDoc.write('<html>\n');
    wPopupDoc.write('<head>\n');
    wPopupDoc.write('<title>文字搜索功能</title>\n');
    wPopupDoc.write('<style>\n');
    wPopupDoc.write('* {font-size:11px;font-family:"Tahoma","Verdana","Arial"}\n');
    wPopupDoc.write('button {width:80}\n');
    wPopupDoc.write('</style>\n');
    wPopupDoc.write('</head>\n');
    wPopupDoc.write('<body bgcolor="buttonface" leftmargin="0" topmargin="0">\n');
    wPopupDoc.write('<table width="300" height="108" border="0" cellspacing="0" cellpadding="3" bgcolor="#F1F2DF">\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td>查找:</td>\n');
    wPopupDoc.write('<td><input type="text" name="searchtext" onchange="window.opener.rng=window.opener.document.body.createTextRange()"></td>\n');
    wPopupDoc.write('<td><button accesskey="S" name="searchbutton" onclick="window.opener.search()">查找</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td>替换:</td>\n');
    wPopupDoc.write('<td><input type="text" name="replacetext"></td>\n');
    wPopupDoc.write('<td><button accesskey="R" name="replacebutton" onclick="window.opener.replace()">替换</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td colspan="2"><input type="checkbox" name="textcase" value="textcase">区分大小写</td>\n');
    wPopupDoc.write('<td><button accesskey="A" name="replaceallbutton" onclick="window.opener.replaceall()">替换全部</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('<tr>\n');
    wPopupDoc.write('<td colspan="2">&nbsp;</td>\n');
    wPopupDoc.write('<td><button accesskey="C" name="cancelbutton" onclick="window.close()">关闭</button></td>\n');
    wPopupDoc.write('</tr>\n');
    wPopupDoc.write('</table>\n');
    wPopupDoc.write('</body>\n');
    wPopupDoc.write('</html>\n');
    wPopupDoc.close();
    }
    //-->
    ///////////调用方法 <input type="button" value="查找" onclick="gofind()">