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