Polymer getting an paper-input, core-input field's value on keypress

wormhit picture wormhit · Jun 29, 2014 · Viewed 7.9k times · Source

I have paper-input element

<paper-input 
    id="{{ id }}" 
    label="{{ label }}" 
    on-keyup="{{ keypressHandler }}" 
    value="{{ value }}">
</paper-input>

and I can catch event when key is released.

Polymer("app-input", {
    ready: function() {
        this.value = false;
    },
    keypressHandler: function(event, detail, sender) {
        console.log("inputChanged");
        console.log(this.value);
    }
});

But this.value is changed only when focus is removed from input field, so I'm not able to retrieve elements value at the moment button is released.

How can I get elements value in keypressHandler() ?

Answer

Scott Miles picture Scott Miles · Jun 29, 2014

For paper-input (and core-input), inputValue is the real-time value, and value is the committed value (updated when the user blurs the field or hits enter).

Also, consider using data observation instead of events.

<paper-input 
    id="{{ id }}" 
    label="{{ label }}" 
    inputValue="{{ value }}">
</paper-input>

...

Polymer("app-input", {
    valueChanged: function() {
        console.log("valueChanged");
        console.log(this.value);
    }
});