How to focus next textarea on button click

focus and blur events in javascript
onfocus
javascript focus not working
textarea focus
how to focus on first field form in html
jquery focus
javascript focus next input
autofocus

I'm trying to do something like a social network, but I'm having problems with jquery, I want, by clicking the comment button, the user is taken to the comment field, but I'm not able to use $(this).

When the user click here

The code:

 <button type="button" class="btn btn-default abreComentarios" >
   <span  class="fa fa-comments-o"></span>
 </button>

The field:

The code:

<div class="comentar">
    <textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>

My jquery:

$('body').on('click', '.abreComentarios', function() {
      //console.log('entrou');
    $(this).next('.caixaComentario').focus();
 });

Remember, I'm using a foreach, so I have to use $(this)

Your next() isn't .caixaComentario but .comentar,

So use the next() but then you'll have to use find() (or children()) to focus the textarea

$('.abreComentarios').on('click', function() {
  //console.log('entrou');
  $(this).next('.comentar').find('.caixaComentario').focus();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-default abreComentarios">click</button>

<div class="comentar">
  <textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário"></textarea>
</div>

How to Make a Text Field Automatically Active (Set Focus), How to make text field or textarea active immediately when the page loads using cause the focus to be set from another event such as a button click, like this:. You can also cause the focus to be set from another event such as a button click, like this: The code is very similar. Simply change the command to onClick and add it to the button: <form name="myform2">. <input type="text" name="mytextfield2">.

Solved, i just did it:

1- Added a data-id with the id of the post in the button

<button type="button" class="btn btn-default abreComentarios" data-id="'.$post->id.'"><span class="fa fa-comments-o"></span></button>

2- Added the same id in the end of the name of class "caixaComentario"

<div class="comentar"> <textarea class="form-control caixaComentario'.$post->id.'" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea> </div>

3- Call without $(this) on jQuery

$('body').on('click', '.abreComentarios', function() { var id = $(this).data("id"); $('.caixaComentario'+id).focus(); });

and Worked :D

Focusing: focus/blur, An element receives a focus when the user either clicks on it or uses the Tab key on the keyboard. That's when a user clicks somewhere else or presses Tab to go to the next form a visitor can interact with: <button> , <input> , <select> , <a> and so on. The textarea allows to edit the HTML in the <div> . The following code will include jQuery Input focus so that you can focus textbox, focus textarea and focus select dropdowns. So make sure that you read through the rest of the article. Following is the basic HTML source code.

$(this) will be your <button>, but calling .next(".caixaComentario") will look for a sibling element to the button. If your <button> and <div class="comentar"> are siblings, the .next(".caixaComentario") will not match any elements as they aren't siblings. The would be a niece/nephew.

Try changing .next(".caixaComentario") to .next("div .caixaComentario")

HTMLElement.focus(), <input type="text" id="myTextField" value="Text field."> <p></p> <button type="​button" onclick="focusMethod()">Click me to focus on the text  On Double Click event of button and div layer Text box click event removing data Selecting all the data of inside textarea by clicking Default value by using OnFocus event of a text box OnBlur:Showing help text by using onfocus and onBlur event triggers Counting the characters dynamically inside a textarea and setting a limit

HTMLElement.blur(), <input type="text" id="myText" value="Sample Text"> <br><br> <button type="​button" onclick="focusInput()">Click me to gain focus</button>  Many browsers have a default focus state for tab selection, which is a dotted outline. It is quite easy to remove, but make sure to replace it with a suitable alternative if you do. <a> s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5.

How To Clear Input Field on Focus, Previous Next ❯. Learn how to clear an input field on focus. Click on the input field to clear it: Clear Input Field on Focus. Example. <!-- When the input field gets focus, replace its current value with an empty string <button onclick="document​. Answer: Use the jQuery .focus () method. You can simply use the jQuery .focus () method to set the focus on the first input box or textarea inside the Bootstrap modal when it is loaded upon activation.

jQuery focus() Method, Definition and Usage. The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it). The focus() method  The onchange JavaScript event is triggered when an element is changed and then loses focus. In the context of a textarea, this happens when the content of the textarea is modified and then the textarea loses focus because the user clicks away or presses the tab key. The onchange element could be used on a textarea to launch a script after the user finishes filling in the field.

Comments
  • Are you getting any errors on your console?
  • @VitorZF there isn't a foreach in your provided code...
  • no errors, just the message that I put to know if is entering the function i.imgur.com/ARUem12.png
  • @cmprogram if I put the entire code that repeats there will be 2 pages of this question
  • @cmprogram take a look i.imgur.com/MmK6079.png
  • or maybe .closest()
  • nop, closest() goes up not down: Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.
  • it works in the fiddle, instead of posting code as image or in the google drive , you need to post the relevant code in your question, but the generated html , not the PHP code