根据光标位置执行不同的功能（JavaScript）

Question

我目前在一个HTML表单中有一个按钮，在单击它时执行一个函数：

<input type="button" onclick="do_action_1();">

但是我有两个函数：

do_action_1()
do_action_2()

我还有两个文本框：

<input id="tb1" type="text" name="textbox1">
<input id="tb2" type="text" name="textbox2">

如果用户的光标在textbox1中，我希望按钮执行相关操作。

do_action_1

但如果用户的光标在textbox2中，我希望按钮执行。

do_action_2.

我不确定在做这件事时从何开始，所以非常感谢任何帮助。

- user1551817

---

这是一个关于编程的内容需要翻译成中文：以下回答似乎有一定帮助：“基本上，思路就是利用鼠标悬停在元素上或不再悬停时，在该元素上设置一个标记。然后编写一个检查该标记的函数。” - Kevin

谢谢Kevin。但是我说的是当光标实际上在文本框内活动而不是鼠标悬停的情况。如果没有表达清楚，对不起。 - user1551817

Answer 1

为每个输入框添加 onclick 事件，在事件内部更改目标元素的属性 attr 值。

$('#tb1').click(function(){
  $('.change_function').attr("onclick","do_action_1();");
});
$('#tb2').click(function(){
  $('.change_function').attr("onclick","do_action_2();");
});

function do_action_1(){
  alert("function 1 is selected !");
}
function do_action_2(){
  alert("function 2 is selected !");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" onclick="do_action_1();" class="change_function" value="Change Function">
Function 1<input id="tb1" type="text" name="textbox1">
Function 2<input id="tb2" type="text" name="textbox2">

编辑

你也可以像 katz 和 Eddie 在下面的评论中建议的那样，使用 focus 事件，因为输入框可能会在没有点击它的情况下处于活动状态，例如通过按下 Tab 键。

$('#tb1').focus(function(){
  $('.change_function').attr("onclick","do_action_1();");
});
$('#tb2').focus(function(){
  $('.change_function').attr("onclick","do_action_2();");
});

- Amani Ben Azzouz

---

如果我点击 #tb1 并按下 Tab 键，现在光标位于 #tb2 上，但当我点击按钮时，仍然会显示“函数 1 已选择！” - Eddie

Answer 2

我不确定我完全理解你的问题，但也许 onfocus 处理程序会有所帮助。

var tb1 = document.getElementById('tb1');
var tb2 = document.getElementById('tb2');

tb1.onfocus = function(){
  console.log('1')
  do_action_1
}

tb2.onfocus = function(){
  console.log('2')
  do_action_2
}

- cheri

Answer 3

我会使用onfocus来在文本框上设置一个类，然后使用该类来确定要执行的操作：

$('input[name^="textbox"]').on('focus',function () {
  $('input[name^="textbox"]').removeClass('active');
  $(this).addClass('active');
});

function do_action () {
  if ($('input[name="textbox1"]').is('.active')) do_action_1();
  else do_action_2();
}

- Katz