通過單選按鈕爲紙張輸入設置對焦

在聚合物（1.0）中，如何選擇（例如）單選按鈕'radio1'時，如何設置熨斗輸入的焦點。通過單選按鈕爲紙張輸入設置對焦

<div> 
    <div>Title:</div> 
    <paper-radio-group> 
    <paper-radio-button name="radio1">Radio1Label</paper-radio-button> 
    <paper-radio-button name="radio2">Radio2Label</paper-radio-button> 
    </paper-radio-group> 
    <paper-input-container> 
    <input is="iron-input"> 
    </paper-input-container> 
</div>

來源

2015-06-19 Jurgen Knops

您需要綁定一個點擊event到radio1：

<paper-radio-button name="radio1" on-click="_setInputFocus">Radio1Label</paper-radio-button>

然後定義功能_setInputFocus使其selects the input並設置focus它：

<script> 
    Polymer({ 
     is: 'the-name-of-your-element', 
     _setInputFocus: function() { 
      this.$$("input").focus(); 
     } 
    }); 
</script>

編輯：現在我們希望輸入被禁用，直到用戶選擇是單選按鈕。所以我們給iron-input的disabled屬性：

<paper-input-container> 
    <input is="iron-input" disabled> 
</paper-input-container>

然後我們改變我們的JavaScript函數，使我們刪除disabled屬性和設置輸入焦點：

<script> 
    Polymer({ 
     is: "focus-test", 
     _setInputFocus: function() { 
      var inputElement = this.$$("input"); // grab the element 
      inputElement.toggleAttribute("disabled", false); // remove the disabled attribute 
      inputElement.focus(); // set the focus to this input 
     } 
    }); 
</script>

來源

2015-06-19 13:04:28

謝謝，做了訣竅很好：）。在選定單選按鈕之前是否禁用該字段的任何更改？以便用戶在首先選擇單選按鈕之前不能選擇該字段。 –

我編輯了我的答案，以便在用戶單擊單選按鈕之前禁用輸入。 –

謝謝，效果很好！ –

您也可以使用<paper-input>代替在<paper-input-container>元素，然後在你的函數中使用

setTimeout(function() { 
     this.$.tabname.inputElement.focus() 
    }.bind(this), 200);

。（設定的超時有時是必要的，因爲如果另一個元素有焦點並且即將關閉（例如熨斗下拉），那麼在等待輸入焦點之前你必須等待它）

來源

2015-12-06 18:09:41 markop

通過單選按鈕爲紙張輸入設置對焦

回答

相關問題