3

I have created a span on top of an input field, basically to manipulate the styling of the input text (fiddle).

It works great as long as you don't type past the input box border, or this happens: enter image description here

Now, I learned that you could have the same scrolling effect as input for the span, like this: 

    white-space: nowrap;
    overflow: hidden;

But, since I am not typing in the span directly, but just updating the innerHTML, this has no effect.

Is there a way I can update the span, so it would treat the updates as typing?

Metal Mathematician
  • 388
  • 1
  • 3
  • 15

1 Answers1

6

You can simulate the same effect setting the scrollLeft really high property on the span as you type on it. You also need to explicitly set the same width on both the input and the span.

You can see a working Fiddle here.

I make a "fake" span, hidden and with variable width, so I can use it to set the scrollLeft property to the width the text would have if it were to behave normally.

To handle the "cursor moving" events, I check the cursor position (via @RenatoPrado), and set scrollLeft to the percentage of the width of the text. So it's working almost like a real input field, but it's still not perfect. This only triggers on keyup (keydown was not working too well), so it has a "lag". And you can't see the blinking cursor, so that's annoying. But hopefully this sets you on the right track.

ishegg
  • 9,685
  • 3
  • 16
  • 31
  • What is the property for the `scrollLeft`? – Metal Mathematician Aug 20 '17 at 21:04
  • how do you mean? – ishegg Aug 20 '17 at 21:05
  • what does the `10000` stand for? – Metal Mathematician Aug 20 '17 at 21:05
  • It's just a "real high" value, as to make sure the span scrolls to the rightmost part. Of course this is not ideal, but getting the width of the typed text is not trivial, I'm working on a more elegant solution as we speak. – ishegg Aug 20 '17 at 21:08
  • I see, it works great as long as you just type, but yeah, as soon as you drag the text with the cursor it messes up – Metal Mathematician Aug 20 '17 at 21:11
  • I fixed the `10000` issue by creating a fake span, setting the text to it as well and using it to measure the would-have-been width of the span. Working on the cursor thing now. – ishegg Aug 20 '17 at 21:15
  • would just leaving it to `10000` cause any problems assuming it never reaches that point? Thank you for your help – Metal Mathematician Aug 20 '17 at 21:18
  • I don't see how it should. However it's always nice to have more elegant solutions in your code, instead of those "hacky" ones. – ishegg Aug 20 '17 at 21:19
  • OK so I got the cursor events working almost perfectly. I don't like the solution at all, still find it kinda buggy... but I hope it helps you. See the edit! – ishegg Aug 20 '17 at 21:49
  • Thank you so much for your help! Do you by any chance have an Idea of how I could achieve what I want differently? (i.e. change color of only part of the input text) – Metal Mathematician Aug 20 '17 at 21:51
  • Hah I got so immersed in this fun challenge I didn't even think of other options. Sadly, I think there's no "native" way of doing this, as the styling you apply to an `input` is applied to it as a whole. I'm sure someone has developed a jQuery plugin for this though. – ishegg Aug 20 '17 at 21:54
  • Yeah, that's also what I figured... (BTW I think you forgot to update the fiddle) – Metal Mathematician Aug 20 '17 at 21:55
  • I totally did. Updated now! Thanks! – ishegg Aug 20 '17 at 21:56