Javascript: How to use same button for different text input?

Question

Suppose I have 2 input elements with only 1 button. I want the button to do a function for one input element at a time according to which one is currently being focused but I don't know how to capture focusing status of each element.

Please consider this example:

<head>
<script type="text/javascript">
var id_box = document.createElement('input');
id_box.id = 'id_box';
id_box.type = 'text';
div.appendChild(id_box);

var weight_box = document.createElement('input');
weight_box.id = 'weight_box';
weight_box.type = 'text';
div.appendChild(weight_box);

function showLetter() {
    if (id_box is being focused){
        document.getElementById('id_box').value = 'ABC';
    }
    if (weight_box is being focused){
        document.getElementById('weight_box').value = 'ABC';
    }
}
</script>
</head>

<body>
    <button onclick="showLetter()">ABC</button>
</body>

Any idea? Thank you very much.

I assume that in the second case you mean getElementById("weight_box")... — 6502
– 6502, Commented May 10, 2011 at 19:50

Kendrick · Accepted Answer · 2011-05-10 19:49:33Z

2

The minute you click the button, the textfield loses focus anyway. Try trapping the OnFocus method for each text box and set a variable to the instance of the textfield. This way you have the latest text field and you don't need your if statement.

answered May 10, 2011 at 19:49

Kendrick

3,7871 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Protocole Over a year ago

Could you please give me an example?

jessegavin · Accepted Answer · 2011-05-10 20:23:32Z

1

If an input has focus and if the user then clicks a button the input will lose focus instantly so you cannot detect which input has focus in the way you want.

You could create a variable that stores the "current" input by attaching an event handler to each input for the onFocus event.

Demo on jsFiddle: http://jsfiddle.net/P58sx/1/

var current_input;

function showLetter() {
  current_input.value = 'ABC';
}

function setCurrentInput() {
  console.log(this);
  current_input = this;
}

var id_box = document.createElement('input');
id_box.id = 'id_box';
id_box.type = 'text';
id_box.addEventListener("focus", setCurrentInput);
div.appendChild(id_box);

var weight_box = document.createElement('input');
weight_box.id = 'weight_box';
weight_box.type = 'text';
weight_box.addEventListener("focus", setCurrentInput);
div.appendChild(weight_box);

edited May 10, 2011 at 20:23

answered May 10, 2011 at 19:49

jessegavin

75.9k28 gold badges141 silver badges165 bronze badges

2 Comments

Kendrick Over a year ago

This doesn't work for me. I'm guessing it's because I'm using IE (not by choice...) It's the correct concept though.

Protocole Over a year ago

I just found that it works only with Chrome but not Firefox. Is there another way to make it works with Firefox or other browsers.

onteria_ · Accepted Answer · 2011-05-10 19:49:20Z

0

I would recommend trying the onFocus event handler.

answered May 10, 2011 at 19:49

onteria_

70.9k7 gold badges73 silver badges64 bronze badges

1 Comment

jessegavin Over a year ago

In what way would you recommend it?

6502 · Accepted Answer · 2011-05-10 19:52:51Z

0

One trick would be to declare a variable and setting it in onFocus event of each field. Then in the button code you can check what was the last field that was focused before the click on the button.

answered May 10, 2011 at 19:52

6502

115k17 gold badges177 silver badges277 bronze badges

Collectives™ on Stack Overflow

Javascript: How to use same button for different text input?

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related