Polymer autogrow textarea focus（）不起作用

我正在使用聚合物的iron-autogrow-textarea。我能够设置自动对焦属性和它的工作非常好。Polymer autogrow textarea focus（）不起作用

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

我已经试过

autoTextArea.focus();

它没有工作

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

这不起作用

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

这显然没有工作的自动对焦功能仅适用于准备（）。

我也尝试访问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>

来源

2015-07-11 IvoryHeart

你能提供更多的代码吗？你在使用jQuery吗？ –

我正在使用Polymer和Jquery（不是很重）。这里是代码。 – IvoryHeart

你并不需要把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>

来源

2015-08-14 07:42:53 Maria

我已经复制并粘贴了上面的代码（并且一遍又一遍地播放了它的变体）。我唯一能够获得焦点或者选择在“area.textarea”上工作的方法是如果在调用之前设置了一个值焦点。即如果area.textarea.value =“东西” 我会生气还是*其他人*有这个问题？ – Sean

我不会遇到这种行为。你可以找到一个链接plunker [here]（http://plnkr.co/edit/BFd7tcqdm2AtHI8Lv4V9?p=preview）。点击按钮将切换两个文本区之间的焦点。 plunker只适用于Chrome，但如果我从我的服务器运行代码，它也适用于Firefox。 – Maria

感谢您的回复。对我来说更具体一点，我实际上使用实现iron-autogrow-textarea的paper-textarea。当我使用您提供的确切代码访问paper-textarea中的iron-autogrow-textarea时，它似乎不起作用。使用相同的querySelector允许我改变占位符文本，所以我知道它正确地选择元素。 – Sean

Polymer autogrow textarea focus（）不起作用

回答

相关问题