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

发布于 2024-11-06 06:43:04 字数 795 浏览 9 评论 0原文

假设我有 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>

有什么想法吗？非常感谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忱杏 2024-11-13 06:43:04

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

回复收藏 0 原文

凹づ凸ル 2024-11-13 06:43:04

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

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

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

回复收藏 0 原文