web-dev-qa-db-fra.com

Evénement de changement d'entrée de polymère

Tout ce que je veux, c'est pouvoir obtenir l'entrée d'un élément polymère <paper-input> et l'avertir à l'échange SANS créer un élément polymère personnalisé.

questions: sur le changement ne fait rien Je doute que cela. La valeur fera n'importe quoi

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>
javascriptpolymer
11
Cygnini - ShadowRi5ing

Je ne sais pas si l'OP souhaitait un rappel de modification lors de la frappe ... mais pour Polymer 1.0+, vous pouvez écouter les modifications lors de la frappe en utilisant simplement le on-input au lieu de on-change "événement"

<paper-input label="Enter search term" on-input="search" value="{{searchTerm}}">
17
ohager

Les on-*gestionnaires d'événement déclaratifs sont des sucres syntaxiques fournis par Polymer. Ainsi, on-change ne fonctionnera pas en dehors d'un élément Polymer. Vous pouvez faire la même chose en Javascript Vanilla en utilisant querySelector et addEventListener:

<paper-input floatingLabel label="test"></paper-input>

<script>
  document.querySelector('paper-input').addEventListener('change', function(event) {
    console.log(event.target.value);
  });
</script>
7
CletusW

L'élément <paper-input> déclenchera un événement de changement de propriété 'valeur' ​​(un événement DOM non-bullant lorsqu'une propriété change '

déclaration des éléments:

<paper-input label="Enter search term" 
             on-value-changed="_onSearchTermChanged" 
             value="{{searchTerm}}">

gestion des événements:

_onSearchTermChanged: function (event) {
     console.log(event.detail.value);
 }

Pour plus de détails, consultez Événements de notification de changement de Polymer

6
magiccrafter

Vous pouvez spécifier un nom d'événement de modification personnalisé dans l'annotation en utilisant la syntaxe suivante https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native :

target-prop="{{hostProp::target-change-event}}"
1
Maze Oslo

Je travaillais avec le curseur de papier et ai découvert que le "changement" ne fait rien, mais que "l'échange" a déclenché ce que je voulais. Comme l'entrée papier est un élément Polymer, elle devrait fonctionner avec la gestion des événements déclaratifs. 

0
Phil Stahlfeld