Search code examples
javascriptpolymerpaper-elements

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


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() ?


Solution

  • 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);
        }
    });