Question

我正在使用聚合物的铁 - 自动增长 - textarea。我能够设置autofocus属性，并且它的工作非常好。

但是当我尝试将焦点设置回textarea时，它似乎无法工作。

我试过了

autoTextArea.focus();

它没有工作

setTimeout(function() {
    $('#autoTextArea')[0].focus();
    }, 1000);

这没有用

    setTimeout(function() {
    $('#autoTextArea')[0].setAttribute('autofocus', true);
    }, 1000);

这显然不起作用，因为自动对焦仅适用于ready（）。

我还试图访问autogrow-textarea中的textArea，甚至看起来没有工作。

有没有办法可以做到这一点？

提前致谢。

以下是我正在使用它的代码段。

    'click #chatEnter': function(e, template) {
    var chatArea = $('#chatArea')[0];
    var chatTextArea = $('#chatTextArea')[0];

    if(chatTextArea.bindValue)
    {
        var chatNode = document.createElement('chat-message');
        chatNode.setAttribute('color', '#ff00ff');
        chatNode.setAttribute('avatar', '/src/someimage.jpg');
        chatNode.setAttribute('username', 'SomeName1');
        chatNode.setAttribute('text', chatTextArea.bindValue);
        chatNode.setAttribute('status',"MyStatus");
        chatNode.setAttribute('timestamp',"2015-07-12 12:00:00 AM");

        chatArea.appendChild(chatNode);
        chatTextArea.bindValue = "";
        setTimeout(function() {
        $('#chatTextArea')[0].setAttribute('autofocus', true);//.focus();
        }, 1000);
    }

以下是我正在使用它的HTML。

    <section main layout vertical id="chat">
      <paper-material id="chatArea" elevation="1" animated style="overflow-y:scroll">
      </paper-material>
      <span layout horizontal>
        <paper-toolbar class="medium">
        <div>
          <iron-autogrow-textarea label="Enter message here" autocomplete="true" autofocus="true" maxRows=5 name="Text Area" id="chatTextArea">
            <textarea id="chatText" max-rows="5" ></textarea>
          </iron-autogrow-textarea>
        </div>
        <paper-icon-button raised icon="send" id="chatEnter"></paper-icon-button>
        <iron-a11y-keys keys="ctrl+enter" on-keys-pressed="[[enterKeyHandler]]"></iron-a11y-keys>
        </paper-toolbar>
      </span>
    </section>

Answer 1

您无需在textarea内添加iron-autogrow-textarea标记。铁组件提供一个。然后，您可以通过.textarea访问内部文本区域，并将注意力集中在它上面。

这是一个小小的工作示例。

<body>
    <iron-autogrow-textarea rows="5"></iron-autogrow-textarea>
    <button>Focus!</button>

    <script>
        var button = document.querySelector('button');
        button.addEventListener("click", function(){
            console.log(document.querySelector('iron-autogrow-textarea'));
            var area = document.querySelector('iron-autogrow-textarea');
            area.textarea.focus();
        });

    </script>

</body>

Answer 2

有一个非常类似的问题 - 当我浏览页面时，焦点没有在我第二次访问时返回到纸张文本区域。在看了一些DOM后，我得出了以下解决方案：

    //focus textarea
    setTimeout(() => {
      //first working solution, line after that a bit more general
      // this.$.idOfPaperTextarea.shadowRoot.querySelector('paper-input-container').querySelector('#input-1').shadowRoot.querySelector('#textarea').focus();
      this.$.idOfPaperTextarea.shadowRoot.querySelector('iron-autogrow-textarea').shadowRoot.querySelector('textarea').focus();
    }, 0);

我想问题是你必须通过shadowRoots来访问textarea。

聚合物autogrow textarea焦点（）不工作

2 个答案: