web-dev-qa-db-ja.com

Polymer入力変更イベント

私が欲しいのは、polymer要素<paper-input>から入力を取得し、カスタムpolymer要素を作成せずに変更時に警告することです。

問題：変更時は何もしないこれは疑わしい。値は何でもする

疑似コード：

<!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
12
Cygnini - ShadowRi5ing

入力中にOPが変更コールバックを必要としていたかどうかはわかりませんが、Polymer 1.0+の場合、入力中にon-input の代わりに on-change "イベント"

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

on-*宣言型イベントハンドラ はPolymerが提供する構文糖衣なので、on-changeは、Polymer要素の外側では機能しません。querySelectorとaddEventListenerを使用して、Vanilla Javascriptで同じことを行うことができます。

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

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

<paper-input>要素は、「値」プロパティ変更イベント（「値」プロパティが変更されたときの非バブルDOMイベント）を起動します

要素宣言：

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

イベント処理：

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

詳細については、 ポリマーの変更通知イベントをチェックしてください

7
magiccrafter

次の構文を使用して、アノテーションにカスタム変更イベント名を指定できます https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native =：

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

私はペーパースライダーを使用していて、「変更中」では何も実行できないことを知りましたが、「変更中」は私が欲しかったものを引き起こしました。 paper-inputはPolymer要素であるため、宣言型のイベント処理で機能するはずです。

0
Phil Stahlfeld