Question

在Polymer（1.0）中，当选择radiobutton'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并将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);

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

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

2 个答案: