Question

我想要的只是能够从聚合物元素＆lt; paper-input＆gt;获得输入。并在不创建自定义聚合物元素的情况下提醒它。

问题：变化不会做任何事情我怀疑这个。值将做任何事情

伪代码：

<!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>

Answer 1

我不知道OP在输入时是否需要更改回调...但对于Polymer 1.0+，可以在键入时听取更改，只需使用on-input代替on-change ＆＃34;事件＆＃34;

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

Answer 2

on-* declarative event handlers是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>

Answer 3

<paper-input>元素将触发＆＃39;值＆＃39;属性更改事件（当值＆＃39;属性更改时，非冒泡的DOM事件）

元素声明：

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

事件处理：

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

有关详细信息，请查看Polymer's Change Notification Events

Answer 4

您可以使用以下语法https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#two-way-native在注释中指定自定义更改事件名称：

target-prop="{{hostProp::target-change-event}}"

Answer 5

我正在使用纸张滑块，并发现＆＃34;在变化＆＃34;什么都不做，但是＆＃34; onchange＆＃34;触发了我想要的东西。由于paper-input是Polymer元素，因此它应该与声明性事件处理一起使用。

聚合物输入变化事件

5 个答案: