Javascript / jQuery to obtain the id of the textarea that I am typing in

Question

I have a simple form with three textareas each with a different id. I want to be able to press the button and return the id of the textarea where I am typing in. Instead when I press the button I receive the id of the button which is button1:

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    function printTagName() {
      $("#p1").html($(":focus").attr("id"));
    }
  </script>
</head>
<body>
  <form>
    <textarea id="textarea1"></textarea>
    <textarea id="textarea2"></textarea>
    <textarea id="textarea3"></textarea>
  </form>
  <p id="p1"></p>
  <button type="button" id="button1" onclick="printTagName()">Press</button>
</body>
</html>

How can I fix this problem?

Use document.activeElement http://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus — Ahmad, Oct 16 '13 at 09:14

mplungjan · Answer 1 · 2013-10-16T13:50:51.153

1

This would work unless you need to know if whatever had focus no longer has it.

For example if the user clicks something that is NOT a textarea before hitting the button and you need to know this, the code will become quite complex

var hadFocus;
$(function() {
  $("textarea").on("focus",function() { hadFocus=this.id; });
});
function printTagName() {
  $("#p1").html(hadFocus || "No textarea had focus");
}

edited Oct 16 '13 at 13:50

answered Oct 16 '13 at 09:14

mplungjan

169,008
28
173
236

Downvoters who do not comment should be banned! – mplungjan Oct 16 '13 at 14:29

Kevin Bowersox · Accepted Answer · 2013-10-16T15:11:51.530

1

When the button is clicked focus shifts to the button. Save the element when a textarea receives focus, then print out the id of the textarea.

var focusElement = {};

$("textarea").focus(function(){
   focusElement = this;
});

$("#button1").click(function(e){
    e.preventDefault();
    $("#p1").html(focusElement.id);
});

JS Fiddle: http://jsfiddle.net/ZYK7f/

edited Oct 16 '13 at 15:11

answered Oct 16 '13 at 09:16

Kevin Bowersox

93,289
19
159
189

Why not use $(this) if you use .attr or use focusElement.id instead of casting it again to a jQuery object? – mplungjan Oct 16 '13 at 11:52
Hi Kevin, Thank you very much for your solution. It worked when I put your javascript code inside a $(document).ready(function() { ... }); Thanks again and all the best. – user2725109 Oct 16 '13 at 12:11
Then I should not have edited my post which now again stores the ID and not the object. – mplungjan Oct 16 '13 at 13:50

Varun Rathore · Answer 3 · 2013-10-16T11:43:38.897

0

Save the TextArea that has focus last using:

var lastFocus;
$("TextArea").focus(function () {
   lastFocus = this;
});

And this call the printTagName function

function printTagName() {
   $("p").html(lastFocus.id);
});

edited Oct 16 '13 at 11:43

answered Oct 16 '13 at 09:27

Varun Rathore

7,730
3
27
30

if you use attr you need to use $(this) if not, use lastFocus.id. In any case already answered twice – mplungjan Oct 16 '13 at 11:39

score 0 · Answer 4 · answered Oct 16 '13 at 12:10

Thank you very much Kevin Bowersox and everyone else for answering my question. Here is the complete code for Kevin's solution (I added a $(document).ready(function() {...}); to his solution):

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function(){
      var focusElement = {};

      $("textarea").focus(function(){
        focusElement = this;
      });

      $("#button1").click(function(e){
        e.preventDefault();
        $("#p1").html($(focusElement).attr("id"));
      });
    });
  </script>
</head>
<body>
  <form>
    <textarea id="textarea1"></textarea>
    <textarea id="textarea2"></textarea>
    <textarea id="textarea3"></textarea>
  </form>
  <p id="p1"></p>
  <button type="button" id="button1">Press</button>
</body>
</html>

Javascript / jQuery to obtain the id of the textarea that I am typing in

4 Answers4