CODEWITHSUNDEEP
javascriptpolymer
wormhit
wormhit

Reputation: 3827

polymer focus() on <paper-input> or <core-input> element

Is there a way to focus core-input or paper-input element?

What I want to achieve is: set cursor to input element so user can start typing.

This way he will not be forced to click on element before writing.

Upvotes: 7

Views: 9724

Answers (5)

Tayab Hussain
Tayab Hussain

Reputation: 931

For Polymer 2.0 use

this.$.id-of-the-Element.focus();

so if your element is like
<paper-input id="myInputElement" type="number" name="myInputElement"> </paper-input>

Then you would do
this.$.myInputElement.focus();

Upvotes: 0

MEC
MEC

Reputation: 1736

for those using Polymer 1.0 (not OP at time of post)

For the first paper-input you can set focus with this:

        $('paper-input input').first().focus();

you can also select by id for a specific paper-input:

        $('#myValue input').focus();

Upvotes: 0

amit
amit

Reputation: 2061

core-input has now a .focus() method it's delegating to the internal 's focus()

From the core-input.html code:

focus: function() {
    this.$.input.focus();
  }

What means that in your own code you need to call it like following:

elem[0].focus()

In my own case, I am calling focus from a timeout. In this case a bind is necessary for core-input to make a right use of this:

$timeout(elem[0].focus.bind(elem[0]));

Upvotes: 8

owlyfool
owlyfool

Reputation: 337

.focusAction(); works in a slightly nicer way, the floating headers will react properly if enabled.

Upvotes: 2

Scott Miles
Scott Miles

Reputation: 11027

core-input is missing focus()/blur() API, this is essentially a bug.

For now you can do this:

<reference to a core/paper-input>.$.input.focus();

Upvotes: 7

Related Questions