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

【问题标题】：Set focus for paper-input via radio button通过单选按钮设置纸张输入的焦点
【发布时间】：2015-09-05 10:39:50
【问题描述】：

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

【问题讨论】：

标签： input radio-button focus polymer paper-elements

【解决方案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>

【讨论】：

谢谢，这个技巧做得很好:)。在选择单选按钮之前禁用该字段的任何更改？这样用户就不能在先选择单选按钮之前选择字段。
我已经编辑了我的答案，以便在用户单击单选按钮之前禁用输入。
没问题。现在应该很容易向radio2 添加一个单击事件，该事件会在单击时禁用输入。

【解决方案2】：

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

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

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

【讨论】：