Javascript：如何使用相同的按钮进行不同的文本输入？

假设我有2个输入元素只有1个按钮。我希望按钮可以根据当前正在聚焦的某个输入元素执行一个功能，但是我不知道如何捕捉每个元素的聚焦状态。Javascript：如何使用相同的按钮进行不同的文本输入？

请考虑下面这个例子：

<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>

任何想法？非常感谢你。

来源

2011-05-10 Protocole

我认为在第二种情况下，你的意思是'getElementById（“weight_box”）'... – 6502 2011-05-10 19:50:49

@ 6502感谢您纠正我的代码。 – Protocole 2011-05-10 19:54:51

如果输入有焦点，并且用户点击了一个按钮，输入将立即失去焦点，因此您无法以您想要的方式检测哪个输入具有焦点。

您可以通过将事件处理程序附加到onFocus事件的每个输入来创建一个存储“当前”输入的变量。上的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);

来源

2011-05-10 19:49:08 jessegavin

这对我不起作用。我猜这是因为我使用的IE浏览器（不是由选择...）这是正确的概念，但。 – Kendrick 2011-05-10 20:22:32

我刚刚发现它只适用于Chrome，但不适用于Firefox。是否有另一种方式可以使它与Firefox或其他浏览器一起使用。 – Protocole 2011-05-19 03:45:05