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

Question

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

Nucleoprotein

Answer 1

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

Pricecutting

this isn't working for me. but i'm using e.attributes['inputValue'] in dart. – Michaelmas

In code you should almost never need to access attributes, access properties instead. Assuming that e is a reference to your input element, try e.inputValue. – Pricecutting

I'm using dart and cannot get a proper instance of the classes, so they don't have the necessary properties. – Michaelmas

I think you are supposed to be able to do (e as PaperInput).inputValue, but I don't actually know anything about Dart, sorry. – Pricecutting

@JacobPhillips, are you using the paper_element package? pub.dartlang.org/packages/paper_elements – Yell

Yes, I got my problem solved here: #24746251 – Michaelmas

This inputValue property isn't in the docs... might help to have it listed there: polymer-project.org/docs/elements/… – Paul

inputValue is documented in the core-input base class. There is a link there where it says "extends core-input". I agree it shouldn't be so hard to find though. – Pricecutting