JavaScript find and highlight text search button not working

Question

I'm using the script below to find and highlight text on a page. It works perfect if you enter the text and press the enter key but the weird thing is it doesn't work if you click the Find button, unless you first click somewhere on the page first. Its like when the search box is in focus or highlighted, the Find button won't work, even though it will work in focus with the Enter key. I tried removing the focus in CSS but no luck.

<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>

This is the search form

<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>

I found the script at http://www.javascripter.net/faq/searchin.htm

Answer 1

the button works fine, just need to clean up your html and script like so (jsfiddle):

<form id="f1" name="f1" action="javascript:void(0)" onsubmit="
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>

and the javascript:

 var TRange=null;

        window.findString = function(str) {
        alert(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;
        }

Answer 2

Replace your form code with this (added onclick method on button):

<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>