JavaScript 查找和突出显示文本搜索按钮不起作用

Question

我使用下面的脚本来查找并突出显示页面上的文本。如果您输入文本并按回车键，它就可以完美工作，但奇怪的是，如果您单击“查找”按钮，它就不起作用，除非您首先单击页面上的某个位置。就像当搜索框处于焦点或突出显示时，“查找”按钮将不起作用，即使它可以通过 Enter 键获得焦点。我尝试在 CSS 中删除焦点，但没有成功。

<script type="text/javascript">   
        var TRange=null;

        function findString (str) {
         if (parseInt(navigator.appVersion)<4) return;
         var strFound;
         if (window.find) {

          // CODE FOR BROWSERS THAT SUPPORT window.find

          strFound=self.find(str);
          if (!strFound) {
           strFound=self.find(str,0,1);
           while (self.find(str,0,1)) continue;
          }
         }
         else if (navigator.appName.indexOf("Microsoft")!=-1) {

          // EXPLORER-SPECIFIC CODE

          if (TRange!=null) {
           TRange.collapse(false);
           strFound=TRange.findText(str);
           if (strFound) TRange.select();
          }
          if (TRange==null || strFound==0) {
           TRange=self.document.body.createTextRange();
           strFound=TRange.findText(str);
           if (strFound) TRange.select();
          }
         }
         else if (navigator.appName=="Opera") {
          alert ("Opera browsers not supported, sorry...")
          return;
         }
         if (!strFound) alert ("String '"+str+"' not found!")
         return;
        }
    </script>

这是搜索表单

<form id="f1" name="f1" action="javascript:void()" onsubmit="if(this.t1.value!=null &amp;&amp; this.t1.value!='') parent.findString(this.t1.value);return false;">
    <input type="text" id="t1" name="t1" value="text" size="20">
    <input type="submit" name="b1" value="Find">
</form>

我在 http://www.javascripter.net/faq/searchin.htm 找到了该脚本

Answer 1

用此替换您的表单代码(在按钮上添加 onclick 方法):

<form id="f1" name="f1" action="javascript:void()" onsubmit="if(this.t1.value!=null && this.t1.value!='') parent.findString(this.t1.value);return false;">
    <input type="text" id="t1" name="t1" value="text" size="20">
    <input type="submit" name="b1" value="Find" onclick="if(this.t1.value!=null && this.t1.value!='') parent.findString(this.t1.value);return false;">
</form>