different function to execute depending on cursor location (javascript)

Question

I currently have a button in a html form which executes a function when it is clicked:

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

But I have two functions:

do_action_1()
do_action_2()

I also have two text boxes:

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

If the user's cursor is in textbox1, I want the button to carry out

do_action_1

but if the user's cursor is in textbox2, I want the button to carry out

do_action_2.

I'm not sure where to begin when doing this so any help is much appreciated.

[This answer](https://stackoverflow.com/a/3395856/8811872) seems somewhat helpful: "Basically the idea is that you use hover to set a flag on the element that the mouse is over it/no longer over it. And then you write a function that checks for that flag." — Kevin, Feb 13 '18 at 07:54
Thanks Kevin. But I'm talking about when the cursor is actually active inside a text box rather than where the mouse is hovering. Sorry if that wasn't clear. — user1551817, Feb 13 '18 at 07:57

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Add onclick event for each input and inside it change the target element attribute attr value

$('#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">

Edit

You can also use focus event as katz and Eddie suggested in comments below, bacause the input field could be active without clicking on it like by hitting the tab key.

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

What if i click on `#tb1` and press tab. Now the cursor is on `#tb2` but When click on btn. Still saying **function 1 is selected !** — Eddie, Feb 13 '18 at 08:12

score 1 · Answer 2 · answered Feb 13 '18 at 08:03

I am not sure I completely understand your question but maybe onfocus handle is helpful

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
}

score 1 · Answer 3 · answered Feb 13 '18 at 08:12

I would actually use onfocus to set a class on the textbox, then use that class to see what action to perform :

$('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();
}

different function to execute depending on cursor location (javascript)

3 Answers3

Edit