通过单选按钮设置纸张输入的焦点

Question

在 Polymer (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>

Answer 1

您需要将点击 event 绑定到 radio1:

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

然后定义函数_setInputFocus使其selects the input and sets the 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>

Answer 2

您也可以使用 <paper-input> 代替 <paper-input-container> 元素，然后使用

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

在你的函数中。（设置超时有时是必要的，因为如果另一个元素有焦点并且即将关闭（例如铁下拉）那么你必须等待它完成才能将焦点放在输入上）

通过单选按钮设置纸张输入的焦点

Set focus for paper-input via radio button

input

radio-button

focus

polymer

paper-elements