Geek Answers Handbook

Polymorphic autoloader textarea focus () not working

I use polymer iron-freight-textarea. I was able to set the autofocus attribute and its work fine.

But when I try to return focus to textarea, it does not work.

I tried

autoTextArea.focus();

It didn’t work

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

It didn’t work

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

This clearly does not work, since autofocus only works on ready ().

I also tried to access textArea inside autogrow-textarea and even didn't seem to work.

Is there any way to do this?

Thanks in advance.

Here is a snippet of code where I use it.

    '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);
    }

Here is the HTML where I use it.

    <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>
+4
source share
1 answer

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>
+1

More articles:


All Articles