根据光标位置执行不同的功能（javascript）答案

【问题标题】：different function to execute depending on cursor location (javascript)根据光标位置执行不同的功能（javascript）
【发布时间】：2018-02-13 07:50:24
【问题描述】：

我目前有一个 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.

执行此操作时我不确定从哪里开始，因此非常感谢任何帮助。

【问题讨论】：

This answer 似乎有点帮助：“基本上这个想法是你使用悬停在元素上设置一个标志，鼠标在它上面/不再在它上面。然后你写一个函数检查那个标志。”
谢谢凯文。但我说的是光标在文本框中实际处于活动状态而不是鼠标悬停的位置。抱歉，如果不清楚。

标签： javascript jquery html

【解决方案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">

编辑

您也可以将focus 事件用作下面 cmets 中建议的 katz 和 Eddie，因为输入字段无需点击即可激活，就像点击标签一样键。

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

【讨论】：

如果我点击 #tb1 并按 Tab 会怎样。现在光标在#tb2 上，但是当点击 btn 时。还是说函数1被选中了！

【解决方案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
}

【讨论】：

【解决方案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();
}

【讨论】：