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

score 9 · Accepted Answer · answered Jun 29 '14 at 18:16

9

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

answered Jun 29 '14 at 18:16

Scott Miles

11,025
27
32

this isn't working for me. but i'm using e.attributes['inputValue'] in dart. – Jacob Phillips Jul 14 '14 at 04:04
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`. – Scott Miles Jul 14 '14 at 20:07
I'm using dart and cannot get a proper instance of the classes, so they don't have the necessary properties. – Jacob Phillips Jul 14 '14 at 20:32
I think you are supposed to be able to do `(e as PaperInput).inputValue`, but I don't actually know anything about Dart, sorry. – Scott Miles Jul 14 '14 at 21:02
@JacobPhillips, are you using the paper_element package? http://pub.dartlang.org/packages/paper_elements – Justin Fagnani Jul 14 '14 at 21:54
Yes, I got my problem solved here: http://stackoverflow.com/questions/24745751/instance-of-paper-elements-in-dart/24746467#24746467 – Jacob Phillips Jul 15 '14 at 00:45
This inputValue property isn't in the docs... might help to have it listed there: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-input – jamstooks Jul 20 '14 at 21:33
`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. – Scott Miles Jul 21 '14 at 18:04

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

1 Answers1