HTML Input Text select() method not working with Chrome

Question

ISSUE:

I have legacy code that runs with IE that I am trying to make cross-browser compatible. One of the features I have been struggling to get working on modern browsers (Chrome in particular) is the .select() function on Input Text. Currently users enter in a value into a field, and then hit the "find on page" button, and the relevant text will be highlighted in the table below.

Internet Explorer:

Google Chrome:

As you can see above, in Chrome, the text is not highlighted. Leading me to believe that the select() functionality is NOT supported in Chrome. However, according to https://www.w3schools.com/jsref/met_text_select.asp this function is supported by Chrome.

RELEVANT CODE:

HTML Button for text selection:

<td align="center"><input type="text" name="textSearchInput" onkeypress="if (event.keyCode == 13) {textSearch(textSearchInput.value); return false;}" size="15" maxlength="30"><button type="button" id="formSubmit2" onclick="textSearch(textSearchInput.value);"><bean:message key="fp.inventory.textSearch"/></button></td>

JavaScript for searching and highlighting that WORKS in Internet Explorer but DOES NOT work in Chrome:

      var oRange = null;

      function textSearch(str)
      {
        if ((str == null) || (str == ''))
          return;

        if (oRange == null)
        { // first entry, or wrap search from the end
          oRange = document.body.createTextRange();
        }
        else
        { // move caret forward
          oRange.move('character', 1);
        }
        var found = oRange.findText(str);
        if (found)
        { // highlight and scroll to there
          oRange.focus();
          oRange.select();
          oRange.scrollIntoView(false);
        }
        else
        { // see if str exists at all by going backward
          found = oRange.findText(str, -1);
          if (found)
          { // wrap search
            oRange = null;
            textSearch(str);
          }
        }

Is there anything else that I am missing from this? I am not the most well-versed in either HTML or JavaScript so I could be missing something basic..

Dave S · Accepted Answer · 2019-09-25 20:11:10Z

2

createTextRange is not supported in Chrome

http://help.dottoro.com/ljouisvm.php

You'll need to detect the browser and use an alternative.

This may work: https://developer.mozilla.org/en-US/docs/Web/API/Document/createRange

answered Sep 25, 2019 at 20:11

Dave S

3,4781 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML Input Text select() method not working with Chrome

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related