How can I rewrite this jQuery function to update the target el LIVE instead of after the user finished typing jQuery.change()

Question

Why doesn't this update live vs. when the user finishes typing or clicking away from the input?

$(document).ready(function() {
    $("input[id^='ralph']").change(function() {
        var currentId = $(this).attr('id');
        var currentValue = $(this).val();
        //Billing
            var elements = currentId.replace('ralph','john');
            $('.' + elements).text(currentValue);
        //Shipping
            var elements = currentId.replace('john','george');
            $('.' + elements).text(currentValue);
    });
});

Sorry keyup isn't enough for a good user experience, see the answers below. — gogogadgetinternet, Jun 04 '13 at 15:04

score 1 · Accepted Answer · edited May 23 '17 at 12:18

You could use keypress since the change event cannot occur until after the control blurs.

Look at the post Best Way to Track onchange as you type in input type text

From jQuery API

keypress()

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

change()

The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

This is what ultimately led me to the answers I was looking for, so I'm giving it the check. Thanks for the thorough answer and for the link. — gogogadgetinternet, Jun 04 '13 at 15:06

Willem Ellis · Answer 2 · 2013-06-04T14:42:55.250

1

You want to use .keyup

$(document).ready(function() {
    $("#ralph").on('keyup', function() {
        var currentId = $(this).attr('id');
        var currentValue = $(this).val();
        //Billing
            var elements = currentId.replace('ralph','john');
            $('.' + elements).text(currentValue);
        //Shipping
            var elements = currentId.replace('john','george');
            $('.' + elements).text(currentValue);
    });
});

Also, input[id^='ralph'] can just be #ralph

Here's a fiddle of it working. http://jsfiddle.net/yxYpW/

edited Jun 04 '13 at 14:42

answered Jun 04 '13 at 14:35

Willem Ellis

4,886
7
38
55

Thanks Willem. There are several ralph elements so using just "#ralph" shouldn't work, but thank you for the other suggestions. Unfortunately for me I'm stuck with an outdated version of jQuery, and thus decided to go with .delegate. – gogogadgetinternet Jun 04 '13 at 15:05
2

There shouldn't be several elements using `#ralph`, ID's should be reserved for one element on the page. – Willem Ellis Jun 04 '13 at 15:08

score 1 · Answer 3 · answered Jun 04 '13 at 14:40

1

On modern browsers, you should use oninput event:

$("#ralph").on('input', function() {...});

On older ones, use this:

$("#ralph").on('keyup paste', function() {...});

answered Jun 04 '13 at 14:40

A. Wolff

74,033
9
94
155

See my response to Willem's answer above. And thank you for the input roasted. – gogogadgetinternet Jun 04 '13 at 15:06
@Willem are you really using more tan one element with id 'ralph'. In this case, this is not valid HTML and will bring you issues in the future for sure. You should use class instead – A. Wolff Jun 04 '13 at 15:11

How can I rewrite this jQuery function to update the target el LIVE instead of after the user finished typing jQuery.change()

3 Answers3