jquery: event for simulating live typing

Question

Part 1:
Is there any event I can use to get a callback when the user 'change' the input field. My definition of change is to simulate the following effect. say, I want to update a label while the user typing in the input box. I tried jquery "change" event. It works, but doesn't have the live effect. Once the input field is updated, I have to click on somewhere in the screen to update the label.

Part 2:

well, if this is not a good idea, I may prevent the form being submitted on enter key. Not sure about a good way to do it either. Quick search found this answer.

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

not tested yet, but hopefully the submit button may still works.

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

thanks,
bsr.

score 8 · Accepted Answer · answered Apr 24 '11 at 14:04

8

This should do it:

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

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

answered Apr 24 '11 at 14:04

Šime Vidas

182,163
62
281
385

mattsven · Answer 2 · 2015-03-20T20:12:36.187

4

Part 1

You can just update it every keyUp, but I would 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

That example you posted stops a form from submitting. Is that your goal?

EDIT:

I think you are trying to control the form's submission?

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

edited Mar 20 '15 at 20:12

answered Apr 24 '11 at 14:02

mattsven

22,305
11
68
104

thanks for ur answer..I will test it, Part 2: nope, I want the submit button to work, not the enter key. I saw a sol here http://stackoverflow.com/questions/1563062/jquery-prevent-form-submition-with-enter-key http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form .. but wish an easy sol. – bsr Apr 24 '11 at 14:06
For that first one ( http://stackoverflow.com/questions/1563062/jquery-prevent-form-submition-with-enter-key ) you can use his function like: `$("#myForm").keypress(preventEnterSubmit);` – mattsven Apr 24 '11 at 14:10

score 0 · Answer 3 · answered Dec 16 '12 at 18:24

0

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>

answered Dec 16 '12 at 18:24

NatureShade

2,187
1
19
27

score 0 · Answer 4 · answered Apr 24 '11 at 13:57

0

Did you try out the keydown or keypress event?

answered Apr 24 '11 at 13:57

Ivo

3,406
4
33
56

score 0 · Answer 5 · answered Apr 24 '11 at 14:29

I would prefer a combination of both, form and field validation: Find 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>');
    }
});

jquery: event for simulating live typing

5 Answers5