Jquery: event to simulate live input

Question

Part 1:
Is there any event that I can use to receive a callback when the user "changes" the input field. My definition of change is to model the next effect. let's say I want to update the label when the user enters text in the input field. I tried the jquery "change" event. It works, but does not have a live effect. Once the input field is updated, I have to click somewhere on the screen to update the label.

Part 2:

Well, if this is not a good idea, I can prevent the form from being submitted to the input key. Not sure if this is a good way to do this. A quick search found this answer.

<form action="" method="post" onsubmit="return false;"> 

not tested yet, but hopefully the submit button may work.

EDIT: checked and onsubmit = "return false;" prevents even the submit button.

thanks,
BSR

Answer 1

This should do it:

 input.bind('keydown keypress', function() { setTimeout(function() { label.text(input.val()); }, 0); }); 

Live demo: http://jsfiddle.net/simevidas/qTBxv/

Answer 2

Part 1

You can simply update it every keyUp , but I suggest you at least wait 1 second after the user finishes typing.

 var timer; var changeTxt = function(){ // Change label text here. }; $("#myInput").keyup(function(){ clearTimeout(timer); timer = setTimeout(changeTxt, 1000); }); 

Part 2

This example that you submitted stops submitting the form. Is that your goal?

EDIT:

I think you are trying to control the flow of the form?

 $("#myForm").submit(function(){ if(/* Your condition here */){ return false; //Only if your condition is true, stop form submission } }); 

Answer 3

Have you tried the keydown or keypress event?

Answer 4

I would prefer a combination of both form and field validation: Find a working sample here: http://jsfiddle.net/ezmilhouse/9mNc4/1/

your html:

 <form method="post" action="post.php"> <input type="text" name="" value="" /> <label>Name</label> <div></div> </form> 

your js:

 // prevent form from being posted empty $('form').live('submit', function(evt){ if ( $('input', this).val() === "" ) { evt.preventDefault(); alert('Field is required!'); } }); // validate form field on the fly var min = 3; $('input').live('keyup change', function(){ if ($(this).val().length < min) { $('div').html('<span class="invalid">min. 3 characters.</span>'); } else { $('div').html('<span class="valid">ok!</span>'); } }); 

Answer 5

there is something called oninput that you can use.

 <form oninput="xx.value=aa.value"> <input type="text" name="aa" value=""> <output name="xx" for="aa"> </output> </form>