to your HTML document.
When the button is pressed a pop-up window (DIV) comes on
the HTML document and asks for the text to search for and then
the user can press "Next" or "Prev" to search for all of the
occurrences of the search term.
has had an almost complete rewrite of the searching and highlighting
functions. The script no longer uses WebKit's window.find() function
or Internet Explorer's createTextRange() and findText() functions.
Instead the script now traverses all elements in the document or in the variable
find_root_node specified such as a div.
var find_root_node = 'mydiv'; // id of div to search
Now all occurrences of the search term in the document
are highlighted and the user can jump to each highlight with the "Next" and "Prev"
buttons or search for a new search term in which case the previous search phrases
are unhighlighted first.
If you need the previous "Find on this page..." script then
click here. The previous
version worked in Internet Explorer, Firefox, Chrome, Netscape, Safari and Android but
it did not work in iPhone or iPad iOS or in Opera. The old version of
this script also did not highlight every occurrence of the search term in the
document. Instead it would only highlight the next match when "Next" was pressed.
- Find on this page function for IE, Chrome, Opera, Android,
iPhone, Netscape, Firefox and Safari.
- Can search forwards and backwards on the page.
- Jumps to and highlights the found search term.
- The pop-up is a DIV instead of an actual window so
that unintelligent pop-up blockers will not block it.
- The pop-up DIV always stays in view even if the page
- Added mouse functions to be able to move the DIV around
the screen with the mouse.
- Added keyboard functions so the user can press ENTER to
search for the next occurrence of the word or term.
Then in your HTML document paste the following code where you
want the "Find on this Page..." button to appear:
All matches are currenting highlighted in yellow and the current selection
is highlighted in orange. You can change the highlighting by creating
classes called .highlight and .find_selected as shown in the box below:
Version 5.1 - A number of features and bug fixes:
- When closing the find window the previous finds are unhighlighted
and the current find is selected.
- Changed the formatting to text window to be more appealing. It can
also be customized.
- Added placeholder="Enter text to find" in text input field.
- After pressing Search the text input box is blurred so that the
keyboard closes on iOS and Android devices.
- Escape key closes find window.
- On reopening the find window the last search text is selected so user can
search again or start typing a new search.
- The find window no longer drags when clicking in the text input field
so that text can be selected with the mouse
- Removed zIndex in mouseDown function because it may have caused "Invalid
Argument" in IE 8.
Version 5.0d - Bug Fix - Versions of IE versions 9 and earlier were having
an error with the mouse functions. Line 418 "target is null or not an object".
Fixed by putting if (!event) event = window.event; on lines 417 and 486.
Version 5.0c - Bug Fix - I accidentally introduced a bug in version 5.0b that
caused the close button and "prev" and "next" buttons to not work on iPhone
or Android devices. Fixed the bug by changing line 475 to return true;
Version 5.0b - Bug Fix - If the doctype was set to an xhtml doctype
then the find window could not be dragged with the mouse. This is
because coordinates for the screen have to be followed by "px" in
xhtml. So added + "px" to the end of lines 514 and 515.
Version 5.0a - Bug Fix - At first I was changing the find_root_node to search
with var find_root_node = document.getElementById('mydiv'); However,
this did not work because the div did not exist until the page was loaded.
Instead now the user specifies just the id of the div. For example:
var find_root_node = 'mydiv'; and the findit() function will create
the reference to the div before it calls the highlight() function.
Version 5.0 - Complete rewrite of the searching and highlighting functions.
Now all text nodes in the document or the specified div are searched through.
All matches are highlighted. The script checks for elements with visibility
set to hidden or display set to none and does not search for the term in
those elements. HTML textarea's are highlighted with a trick because I can't
find a way to highlight multiple search terms in a textarea with a span. So
the script copies the value of the textarea to a pre tag and highlights
the matches in the pre tag while turning the textarea invisible. If the pre
tag is clicked on then the textarea becomes visible again.
Version 2.3e - Bug Fix - The below bug fix for IE 11 was not working. Since
IE 11 no longer supports detecting IE with document.all the code has been
changed by detecting if the browser supports window.find starting on
line 51. So far no versions of IE support window.find, but Chrome and Firefox do.
Version 2.3d - Bug Fix - Internet Explorer 11 was not working with find2.js.
Updated lines around line 43 to fix detection of IE 11 because IE 11 removed
support for detection of document.all.
Thanks to Warren Yates for the fix.
Version 2.3c - Bug Fix - An HTML 5 doctype of <!DOCTYPE html> was causing
current_bottom to be set incorrectly in the move_window() function. So the
window was constantly jumping up and down. Fixed by replacing current_bottom and
current_right declarations with var current_bottom = (window.innerHeight ||
document.documentElement.clientHeight || document.body.clientHeight) + current_top;
Hopefully this does not cause a problem with certain browsers and/or doctypes.
Version 2.3b - Bug Fix - The "next" button was displaying "Found" and "Not Found",
but the "Previous" button was displaying "true". Changed "Previous" to display
"Found" and "Not Found".
Version 2.3 - Bug Fix - Update for Internet Explorer. If the webpage has a menu
system with display:none elements and IE's findText function finds text in this
menu system then when we try to highlight the text with txt.select(); IE throws an error:
Could not complete the operation due to error 800a025e. Fixed the error by adding
try and catch around line 103.
Version 2.2 - Bug Fix - Update for Firefox. No longer tries to get a selection
of the text if the search term was not found. This might be able to avoid a bug
in Firefox with getRangeAt(0);
version 2.1 - Bug fix - In firefox the window.find function was not searching
at the beginning of the document, but where the "find on this page" button was
initially called with the find2.js file. This has been fixed by changing line
477 of the script to use document.body.insertBefore(findwindow, document.body.firstChild);
instead of document.body.appendChild(findwindow);
version 2.0 - Major revision. Now the findwindow DIV is created dynamically
of the find window not being able to determine its location if the find button
and div is nested in many other divs.
Fixed a bug where the text search would find the text in
the findwindow div. Fixed by making the div hidden while searching
and then making it visible afterward. This also fixed a bug in
Firefox: uncaught exception: [Exception... "Component returned
failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsISelection.getRangeAt]"
which happens when the range is selected with getRangeAt on
an <input type='text' element or a <textarea element. So this
exception may still appear in Firefox's error console if a search is made
on your page and the text is found in one of those html elements. (v. 1.3c)
Now there is a version of the find script that searches
back at the beginning of the document if the search term
is not found at the end. This loop searching version can
be downloaded here:
This script seems to work in Safari now. But the find button
does not even show up in Opera browser.
There was a bug in Firefox where if the find box was
blank and the user pressed "Next" then the default Firefox
find box would come up. I believe I have solved this problem
by adding a check to see if the find box is empty. I
added this line to findit() and findprev() functions
if (string != "")
test.innerHTML = window.find(string, false, false);
version 1.3b - Changed all html code to lowercase to work with a more
strict doctype and xhtml. Also changed <br> tags to
<br /> .
This script now uses the same DIV in Firefox and Netscape. I
figured out how to use the
window.find(string, caseSensitive, searchBackwards) function
in Firefox and Netscape. It works great in Netscape and we
just have to use these two functions to search forwards and
window.find(string, false, false); // Search Forwards
window.find(string, false, true); // Search Backwards
You can still choose to use the built-in search window
with this script by changing the variable mozilla_opt to 0.
However certain versions of Netscape don't seem to find
the search terms when you call the built-in search window
For Firefox I had to add a few functions because Firefox
loses focus on the selection when you press the Next or Prev
buttons. So it could only find the first occurrence of the
search term over and over. So for firefox I had to add the
following functions to record the highlighted selection:
sel = window.getSelection(); // get selection
range = sel.getRangeAt(0); // get object
Then I had to use the following functions to highlight
the recorded search term again after a button was pressed:
sel = window.getSelection(); // get selection
if(sel.rangeCount > 0) sel.removeAllRanges(); // remove all ranges
sel.addRange(range); // add last highlighted range