Blocking function doing strange
So I got some codepen . Everything still works, except for the little things. I got <h1>
and <input>
. When I enter something into text input, its value should be transmitted in <h1>
real time.
I tried to do it with the keyup function :
$('input[name=titleInput]').keyup(function(){
$('#title').text(this.value);
});
Something is happening, but not what I want.
When I enter something into the text input and then delete it (with backspace) and re-enter something, only the first character is passed into the header.
Try this on my code. Maybe this is just a silly mistake, but this behavior is rather strange to me.
Thanks for your help in advance!
EDIT:
I am using text-fill-color
which might be causing the problem.
EDIT 2: A
friend of mine checked it out. It worked for her. She is using Chrome and the same version as me (58.0.3029.110 (official build) (64-bit)).
source to share
Chrome doesn't update content correctly. Such errors can always occur if you are using vendor prefixed css properties, so you should avoid these errors.
You can hide the container before updating and then show it again with a timeout. This will refresh but will also flicker.
$('input[name=titleInput]').keyup(function(){
$('.clipped').hide()
$('#title').text(this.value);
setTimeout(function() {
$('.clipped').show();
})
});
EDIT An alternative might be to use text background-clip
in the text and provide the flipped image itself, but I don't have time to test it right now.
EDIT2 Based on @TobiasGlaus test, the following code solves the flicker-free issue:
$('input[name=titleInput]').keyup(function(){
$('.clipped').hide().show(0)
$('#title').text(this.value);
});
This seems to be different from $('.clipped').hide().show()
, most likely it triggers an animation with a duration 0
and uses requestAnimationFrame
that also causes a redraw. To avoid relaying this jQuery behavior, 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();
})
}
});
source to share
I would 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 for key insert / press events and will update the value on change.
source to share