Question

我有一个简单的表单，其中3个textareas，每个都有不同的id。我希望能够按下按钮并返回我输入的textarea的ID。相反，当我按下按钮时，我会收到按钮的id，即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>

如何解决此问题？感谢。

Answer 1

除非您需要知道焦点是否已经不再具有它，否则这将起作用。

例如，如果用户在点击按钮之前点击不是textarea的内容而您需要知道这一点，则代码将变得非常复杂

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

Answer 2

单击该按钮时，焦点会切换到该按钮。 textarea获得焦点后保存元素，然后打印出id的{{1}}。

textarea

JS小提琴： http://jsfiddle.net/ZYK7f/

Answer 3

使用以下方式保存最后焦点的TextArea：

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

这会调用printTagName函数

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

Answer 4

非常感谢Kevin Bowersox和其他所有人回答我的问题。以下是Kevin解决方案的完整代码（我在他的解决方案中添加了$（文档）.ready（function（）{...}）;

<!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获取我输入的textarea的id

4 个答案: