Polymer input change event

前端 未结 5 1705
独厮守ぢ
独厮守ぢ 2021-02-05 20:42

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

issues: on-change

相关标签:
5条回答
  • 2021-02-05 20:49

    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}}">
    
    0 讨论(0)
  • 2021-02-05 20:56

    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}}"
    
    0 讨论(0)
  • 2021-02-05 21:12

    <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

    0 讨论(0)
  • 2021-02-05 21:12

    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.

    0 讨论(0)
  • 2021-02-05 21:14

    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>
    
    0 讨论(0)
提交回复
热议问题