如何在提交聚合物紙張輸入時調用函數？

我有一個聚合物應用程序需要輸入文本（ID），並根據ID是否在列表中返回「是」或「否」。理想情況下，用戶可以按回車或點擊「查找」按鈕，「搜索ID」功能將被調用。如何在提交聚合物紙張輸入時調用函數？

我可以不使用表單嗎？如果我使用表單，我可以在不發出post/put/get請求的情況下執行此操作嗎？數據全部存儲在元素的屬性（數組）中。

<dom-module id="demo-app"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
    </style> 
    <paper-card heading="Search for ID"> 
     <div class="card-content"> 
     <paper-input id="input" always-float-label label="ID"</paper-input> 
     </div> 
    </paper-card> 
    </template> 

    <script> 
    Polymer({ 

     is: 'demo-app', 

     properties: { 
     myIds: { 
      type: Array, 
      value: ['testID1', 'testID2'], 
     }, 
     inputObj: { 
      type: Object, 
      value: function(){ 
      return this.$.input; 
      } 
     }, 
     userInput: { 
      type: String, 
     }, 
     }, 
     onEnter: function(){ 
     if(this.myIds.includes(this.userInput)) { 
      console.log(this.userInput); 
     } 
     }, 

    }); 
    </script> 
</dom-module>

來源

2017-01-30 Bobby Battista

您可以更新您的問題，以便它顯示[最小，完整和可驗證的示例]中的所有相關代碼（http://stackoverflow.com/help/mcve）。 –

我見過類似的問題和相關的答案 - 比如1）使用iron-a11y-key來監聽keys =「enter」和2）製作一個名爲「checkForEnter」的函數，如if（e.keyCode === 13）並在紙張輸入元素屬性上添加on-keydown =「checkForEnter」。甚至有些地方我使用表單並覆蓋默認表單提交。想知道是否有「最佳實踐」的方式來做到這一點 –

高分子最好的做法是「使用平臺」，在這種情況下HTML（一個按鈕的默認行爲是提交表單）&一小段JavaScript會工作。

具體來說，包你輸入的形式，並添加一個按鈕：

<form id="demoAppForm"> 
    <paper-card heading="Search for ID"> 
    <div class="card-content"> 
     <paper-input id="input" always-float-label label="ID"</paper-input> 
    </div> 
    <button>Lookup</button> 
    </paper-card> 
<form>

然後設置一個事件監聽器當表單提交，preventDefault該事件（所以它不會做GET請求），並通過將這些功能，您Polymer({...})呼叫你想用什麼數據：

attached: function() { 
    this.listen(this.$.demoAppForm, 'submit', 'onSubmit'); 
}, 

onSubmit: function(event) { 
    event.preventDefault(); 
    console.log('Lookup this:', this.$.input.value); 
},

請確保您刪除事件偵聽器也當元件脫離：

detached: function() { 
    this.unlisten(this.$.demoAppForm, 'submit', 'onSubmit'); 
},

來源

2017-01-31 05:09:19 JohnRiv

我可以簡單地通過添加一個on-change =「inputHandler」來實現它 - 由於某些原因，只有當我按下Enter時纔會觸發它。如果我將任何東西綁定到值，例如

{{userInput}}被輸入

該值將實時更新 - 但該函數僅在我按Enter時運行。我也將值設置爲「value =」{{userInput :: input}}「，儘管我不確定」:: input「部分是什麼 - 你知道嗎？無論如何我會使用你的代碼，謝謝你的向我展示這是如何完成的！ –

如何在提交聚合物紙張輸入時調用函數？

回答

相關問題