Javascript:如何将相同的按钮用于不同的文本输入

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

本文关键字：用于 文本 输入 按钮 Javascript      更新时间：2023-09-26

假设我有 2 个输入元素和 1 个按钮。我希望按钮一次为一个输入元素执行一个功能，根据当前正在聚焦的输入元素，但我不知道如何捕获每个元素的聚焦状态。

请考虑此示例：

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

知道吗？谢谢。

单击该按钮的那一刻，文本字段无论如何都会失去焦点。 尝试为每个文本框捕获 OnFocus 方法，并为文本字段的实例设置一个变量。 这样你就有了最新的文本字段，你不需要你的if语句。

如果输入具有焦点，并且用户随后单击按钮，则输入将立即失去焦点，因此您无法检测到哪个输入具有所需的焦点。

您可以通过将事件处理程序附加到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);

我建议尝试onFocus事件处理程序。

一个技巧是声明一个变量并在每个字段的事件中onFocus设置它。然后在按钮代码中，您可以检查在单击按钮之前聚焦的最后一个字段是什么。

相关文章：