JQUERY copies the contents of a text field to a field when typing

Question

I am trying to copy the contents of a text box into a div at the same time while the user is typing. Here is the JSFIDDLE CODE The error facing the, length of the value copied inside the div is always less than the length of the text field . what error can i make in the script?

Answer 1

Use keyup instead.

 $("#boxx").keyup(function(event) { var stt = $(this).val(); $("div").text(stt); }); 

keypress happens when a key is pressed and you want the text to be transmitted when you release the key.

Answer 2

The keyup and keypress events work for keyboard input, but if you use the mouse to right-click and paste something into the text field, then changing the value will not be raised. You can use bind with the input event to register both keyup and insert such events:

 $("#textbox1").bind('input', function () { var stt = $(this).val(); $("#textbox2").val(stt); }); 

Answer 3

The keypress event occurs before the text in the <input> element is updated. You can postpone the copy operation to get around this. Even a delay of 0 milliseconds will be enough to perform the copy operation after updating the item:

 $("#boxx").keypress(function() { var $this = $(this); window.setTimeout(function() { $("div").text($this.val()); }, 0); }); 

Updated fiddle here .

Answer 4

 $("#title").keypress(function() { var $this = $(this); window.setTimeout(function() { $("#slug-url").val($this.val().toLowerCase().replace(/ /g, '-')); }, 0); }); 

using the @ Frédéric Hamidi method to generate a seo-friendly url after replacing spaces with "-" and changing the text to small.

Answer 5

use keyup and change both.

 $("#boxx").on('keypress change', function(event) { var data=$(this).val(); $("div").text(data); }); 

here is an example http://jsfiddle.net/6HmxM/785/

Answer 6

 $("#boxx").keyup(function() { var $this= $(this); window.setTimeout(function() { $("div").text($this.val()); }, 0); }); 

this work.

Copy also works f9 enter code here