CODEWITHSUNDEEP
javascriptjqueryhtmlcssevents
Tobias Glaus
Tobias Glaus

Reputation: 3628

keyup function performing weird

So I got a little codepen. Everything works so far except a little thing. I got a <h1> and an <input>. When I type something in the text input, its value should get passed to the <h1> in realtime.
I tried to do that with a keyup function:

$('input[name=titleInput]').keyup(function(){
  $('#title').text(this.value);
});

Something happens, but not what I want.
When I type something in the text input, then delete it (with backspace) and re-enter something, only the first character gets passed to the title.

Try it out on my codepen. Maybe it's just a stupid mistake of mine, but to me this behaviour is pretty weird.
Thanks for your help in advance!

EDIT:
I am using text-fill-color, which may causes the problem.

EDIT 2:
A friend of mine tested it. It worked for her. She's using Chrome and the same version as me (58.0.3029.110 (official build) (64-Bit)).

Upvotes: 3

Views: 231

Answers (2)

t.niese
t.niese

Reputation: 40842

Chrome does not update the content correctly. Such kind of bugs can always happen if you use vendor prefixed css properties, so you should avoid those.

You could hide the container before update, and then show it again with a timeout. This will trigger an update, but would also result in flickering.

$('input[name=titleInput]').keyup(function(){
  $('.clipped').hide()
  $('#title').text(this.value);
  setTimeout(function() {
    $('.clipped').show();
  })
});

EDIT An alternative might be to use background-clip on the text and provide the inverted image yourself, but I right now don't have time to test that.

EDIT2 Based on the test of @TobiasGlaus the following code does solve the problem without flickering:

$('input[name=titleInput]').keyup(function(){
  $('.clipped').hide().show(0)
  $('#title').text(this.value);
});

This seems to be different to $('.clipped').hide().show() most likely it starts an animation with duration 0 and uses requestAnimationFrame which also triggers a redraw. To not relay on this jQuery behaviour, the code should be written as:

$('input[name=titleInput]').keyup(function(){

  if( window.requestAnimationFrame ) {
    $('.clipped').hide();
  }

  $('#title').text(this.value);

  if( window.requestAnimationFrame ) {
    window.requestAnimationFrame(function() {
      $('.clipped').show();
    })
  }
});

Upvotes: 4

Bamieh
Bamieh

Reputation: 10906

i'd use the following lines:

$('input[name=titleInput]').bind('keypress paste', function() {
   setTimeout(function() {
     var value = $('input[name=titleInput]').val();
     $('#title').text(value);
   }, 0)
});

This will listen to the paste / keypress events, and will update the value on change.

Upvotes: 0

Related Questions