CODEWITHSUNDEEP
javascriptpolymer
Cygnini - ShadowRi5ing
Cygnini - ShadowRi5ing

Reputation: 175

Polymer input change event

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>

Upvotes: 13

Views: 24443

Answers (5)

magiccrafter
magiccrafter

Reputation: 5474

<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

Upvotes: 7

Jesse T-Cofie
Jesse T-Cofie

Reputation: 227

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

Upvotes: 1

ohager
ohager

Reputation: 543

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

Upvotes: 21

Phil Stahlfeld
Phil Stahlfeld

Reputation: 71

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.

Upvotes: 0

CletusW
CletusW

Reputation: 3980

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>

Upvotes: 8

Related Questions