Polymer input change event

Question

All I want is to be able to get the input from a polymer element <paper-input> and alert it onchange WITHOUT creating a custom polymer element.

issues: on-change doesn't do anything I doubt this.value will do anything

Pseudocode:

<!DOCTYPE html>
<html>
  <head><!--insert proper head elements here--></head>
  <body>
    <paper-input floatingLabel label="test" on-change="alert(this.value)"></paper-input>
  </body>
</html>

score 21 · Accepted Answer · answered Oct 05 '15 at 14:30

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}}">

score 8 · Answer 2 · answered Jul 25 '14 at 00:53

8

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>

answered Jul 25 '14 at 00:53

CletusW

3,890
1
27
42

1

[Declarative event handlers](https://www.polymer-project.org/3.0/docs/devguide/events) in Polymer 3 docs. – Eugene Aug 23 '18 at 13:44

magiccrafter · Answer 3 · 2017-02-25T12:35:21.143

7

<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

edited Feb 25 '17 at 12:35

answered Dec 05 '16 at 08:19

magiccrafter

5,175
1
56
50

3

why is this nowhere in paper-inputs docs! It seems like this event would be extremely important and yet i can not find it anywhere in its documentation. – colin rickels Mar 08 '17 at 18:32

score 1 · Answer 4 · answered Dec 01 '15 at 12:12

1

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}}"

answered Dec 01 '15 at 12:12

Jesse T-Cofie

227
3
11

score 0 · Answer 5 · answered Nov 22 '14 at 07:35

0

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.

answered Nov 22 '14 at 07:35

Phil Stahlfeld

71
1
4

1

onchange="" is an old way of handling and overriding javascript events. addEventListener in the answer above is correct. Also, on-change="" is not the same as onchange="". The reason why the original on-change listed above wasn't working is because you need to give it something like: on-change="{{myTestClick}}" and in the code do myTestClick: function (event, detail, sender) { alert('hi'); } They are meant to be used from within the implementation of your element. Not outside. – David Mar 31 '15 at 20:46

Polymer input change event

5 Answers5

Linked