IE not synchronizing scroll from input ScrollLeft to Highlight Area in INPUT tags

[garysieling]

IE not synchronizing scroll from input ScrollLeft to Highlight Area in INPUT tags

[mistic100]

I'm didn't write this part of the code, see if @rinogo has an idea

[alfadormx]

Hi,

Further research seems to reveal that JQuery's scrollLeft and scrollTop functions fallback into JavaScripts element.scrollLeft function when you don't send a value as parameter.

Having said this and following my previous example doing:

document.getElementById('e5').scrollLeft;
// and
document.getElementById('e5').scrollLeft = 50;

In a Chrome + Firefox console it will move the Input window as expected.
The same behavior is not supported by IE. The return value is always 0 and when set you don't see any change in scroll.

There must be another way to calculate the 'scroll' position of an input in IE.

Any help by the community is greatly appreciated.

[rinogo]

Hello! Unfortunately, I can't dive in right now and find a workaround. For my particular application, supporting IE wasn't a top priority, given that this code was to be used on essentially an intranet site. By the way, have you tried other versions of IE? You might find a version for which it works (I believe I did do some IE testing), and either 1) only support from that version on or 2) at least know where to start looking for alternatives (based on the version, changelogs, etc.).

Sorry I can't be of more assistance!

[rinogo]

By the way, I looked into it a bit more - you should check out my merge request (#22), particularly the last few comments about IE8/IE9 compatibility.

[alfadormx]

Hi, thanks for your answers.
Well, for the time being I have discovered that the scrollLeft property for inputs works in IE<9.

On the other hand. I have found a workaround to solve my problem.

What I do is actually use a textarea but I make it appear as an Input with the following inline styles:

<textarea id="demo1" cols="50" rows="1" style="white-space: nowrap; overflow: hidden;">Lorem ipsum dolor sit amet, vulputate molestie nec dui.</textarea>

then with a javascript code as follows:

$(document).ready(function() {
  $('#demo1').highlightTextarea({
    words: {
      color: '#FF0000',
      words: ['Lorem ipsum','vulputate']
    }
  });
});

I manage to get the following result (screenshot from IE11)

I will continue my efforts to prove if there is no other solution. Otherwise I will remain with the one previously introduced.

Thanks!