防止元素失去焦点

Question

我们在文档中有很多input。
我们想打开一个对话框来生成文本，并将其放入当前聚焦的输入框中。

问题是，当我点击按钮或其他任何东西来打开对话框时，输入框失去了焦点。我无法确定哪个输入框需要获得生成的文本。

$("#button").click(function(){
    // something should goes here to prevent stealing inputs focus
});

有没有解决方案可以防止那个特殊按钮窃取焦点？

- Omid

---

在单击按钮时保存焦点，并在对话框的回调或关闭按钮上加载它。 - ggzone

看起来是个好主意，我应该测试一下。 - Omid

不起作用！！输入模糊将在按钮点击之前触发。 - Omid

Answer 1

你不能使用一个表单的 button ，然后用一个 <span> 让它表现得像一个按钮吗？

更新：

你可以尝试使用类似下面这样的东西：

$('span').hover(function(){
    focused_element = $("*:focus").get(0);
});
$('span').click(function(){
    focused_element.focus();
});

请查看我的fiddle

- Alex

---

哦，真的吗？嗯，也许你需要像评论中@ ggzone建议的那样去做。 - Alex

与失去焦点无关吗？ - e382df99a7950919789725ceeec126

输入模糊将在单击 span 之前触发。 - Omid

@OmidAmraei，你担心在我的答案中添加focus()处理程序的性能问题，但是你又使用了一个不仅有*选择器，而且还有:focus伪选择器的解决方案？我放弃了。 - Rory McCrossan

@RoryMcCrossan: :focus选择器只会运行一次，但是focus事件将在每个输入框获取焦点时都会运行。无论如何，我使用input[type=text]:focus代替。我为这个解决方案投了赞成票。 - Omid

当您学习jQuery时却没有任何JavaScript基础，应该如何编写JavaScript代码呢？$("*:focus").get(0)是什么意思？难道你的意思是document.activeElement？ - Semra

Answer 2

你的领域有独特的ID吗？如果有，当对话框的保存/关闭按钮被点击时使用该ID将焦点设置回该字段。

不要担心焦点会被窃取，只要在完成后重置它即可。

- Jason

Answer 3

我的解决方案是处理每个焦点并将其保存在focusEle中：

$(function () {

    var focusEle;

    $('*').focus(function () {
        focusEle = this;
    });

    $('button').click(function (e) {
        console.log(focusEle);
        var c = confirm('Love the cat :3?');
        $(focusEle).focus();
    });
});

使用HTML：

<input type="text">
<button>Press me!</button>

示例可用：http://jsfiddle.net/76uv7/

根据 @ggzone 的想法

- e382df99a7950919789725ceeec126

---

这似乎不起作用，因为您的 * 选择器意味着当您单击按钮时，它将成为 focusEle。 - Rory McCrossan

@RoryMcCrossan 我猜也是这样，但请检查一下示例，它可以工作。 - e382df99a7950919789725ceeec126

我已经检查了这个代码片段，在我的FF9浏览器中，当你点击按钮后，焦点没有返回到文本输入框。 - Rory McCrossan

在Chrome和FF中进行了测试，有点令人困惑... 你确定在点击按钮之前聚焦于文本输入框吗？ - e382df99a7950919789725ceeec126