All I want is to be able to get the input from a polymer element
issues: on-change
I don't know if the OP wanted a change callback while typing...but for Polymer 1.0+ one can listen to the changes while typing simply use the on-input
instead of on-change
"event"
<paper-input label="Enter search term" on-input="search" value="{{searchTerm}}">
You can specify a custom change event name in the annotation using the following syntax https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native :
target-prop="{{hostProp::target-change-event}}"
<paper-input>
element will fire 'value' property change event (a non-bubbling DOM event when a 'value' property changes)
elements declaration:
<paper-input label="Enter search term"
on-value-changed="_onSearchTermChanged"
value="{{searchTerm}}">
event handling:
_onSearchTermChanged: function (event) {
console.log(event.detail.value);
}
For more details check Polymer's Change Notification Events
I was working with paper-slider and found out that the "on-change" doesn't do anything, but "onchange" triggered what I wanted. Since paper-input is a Polymer element, it should work with the declarative event handling.
The on-*
declarative event handlers are syntactic sugar provided by Polymer, so on-change
won't work outside of a Polymer element. You can do the same thing in vanilla Javascript using querySelector
and addEventListener
:
<paper-input floatingLabel label="test"></paper-input>
<script>
document.querySelector('paper-input').addEventListener('change', function(event) {
console.log(event.target.value);
});
</script>