jQuery .focus() doesn't work for the textarea

Question

I want to focus on the textarea using jquery, so I wrote this:

let item = $('[data-model-abs-id="_player.5p6G3xVhKxa.6pN08IGqVGe.6dzqtCIQ2y4.6dkh6UeayIM"]'); item.focus();

It didn't work, so I tested if the textarea is selected or not:

let item = $('[data-model-abs-id="_player.5p6G3xVhKxa.6pN08IGqVGe.6dzqtCIQ2y4.6dkh6UeayIM"]'); item.animate({'top': '-=50px'},'slow');

The text input moves, so I think I selected the textarea correctly and at the right point.

I tested item.get(0).focus(); and setTimeout and setInterval to initiate the focus but none of them worked.

Here is the last thing I tested (I'm using Chrome):

let interval = setInterval(focusEachSecond, 1000); // also setTimeout doesn't work function focusEachSecond(){ var item = $('[data-model-abs-id="_player.5p6G3xVhKxa.6pN08IGqVGe.6dzqtCIQ2y4.6dkh6UeayIM"]') item.focus() }

Here is textarea tag:

<textarea style="font-family: &quot;Calibri Light Charset0_87E9C737&quot;, sans-serif; font-size: 26.9764px; line-height: normal; font-weight: normal; direction: ltr; text-align: left; color: rgb(255, 0, 0); padding: 1.47144px 2.4524px 0px; height: 34.3146px; transform: translate(0px, 0px);" maxlength="" data-accepts="events" placeholder="" data-reactid=".0.0.3.2.0.1.0:$_player=15p6G3xVhKxa=16pN08IGqVGe.0.3:$c803.1:$c993.$slideobject1275.2.0"></textarea>

What I'm missing and How to fix this?

Are you sure item is not null? Have you checked in console item.length? — palaѕн
– palaѕн, Commented Feb 24, 2020 at 11:27
I get this when I log item : init [div.slide-object.slide-object-textinput.shown., prevObject: init(1), context: document, selector: "[data-model-abs-id="_player.5p6G3xVhKxa.6pN08IGqVGe.6dzqtCIQ2y4.6dkh6UeayIM"]"] — Sara Ree
– Sara Ree, Commented Feb 24, 2020 at 11:27

Mamun · Accepted Answer · 2020-02-24 11:32:59Z

.get() returns an array of raw DOM elements. .eq() returns it as a jQuery object, meaning the DOM element is wrapped in the jQuery wrapper.

Try using .eq().

item.eq(0).focus();

Demo:

//$("li").get(0).addClass('myClass1');//Uncaught TypeError: $(...).get(...).addClass is not a function $("li").eq(1).addClass('myClass2');

.myClass1{ color: red; } .myClass2{ color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="foo">foo</li> <li id="bar">bar</li> </ul>

@SaraRee, you may still have some issue in your code but the point I have mentioned is also valid, please check the code example...
var item = document.getElementsByTagName("textarea")[0]; let userInputCheckPoints = setInterval(checkUserInput, 1000); function checkUserInput(){ item.focus(); }
I used the above code and it works fine but I don't know why?
@SaraRee, there is no such attribute (data-model-abs-id) in the element (textarea)!!!

Collectives™ on Stack Overflow

jQuery .focus() doesn't work for the textarea

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related