如何防止在html中模糊（焦点丢失）时取消选择所选文本答案

【问题标题】：How to prevent deselection of selected text on blur (focus lost) in html如何防止在html中模糊（焦点丢失）时取消选择所选文本
【发布时间】：2013-12-02 17:53:46
【问题描述】：

我已经对这个听起来很简单的问题进行了几天的研究，但我没有看到任何结果。

简而言之，我的问题如下：我想在某个输入字段中选择文本，将焦点移动到另一个字段（或一般来说其他一些元素），但不会丢失我选择的文本。

这种情况可能对应于我在字段中选择文本，右键单击并显示自定义弹出菜单，但不希望失去所选文本的焦点的用例，因为我想做一些操作在之前选择的文本上。

一个小的代码测试示例将是（对于我最初的简单场景 - 这里我在第二个输入字段获得焦点时强制选择文本）：

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <input type="text" id="text1" size="20" value="Test1"/>
    <input type="text" id="text2" size="20" value="Test2"/>

    <script>
    $('#text2').focus( function (evt) {
        var target = $('#text1')[0];
        target.select();
        console.log('active/focused element: ' + document.activeElement.id);
    });
    </script>
</body>
</html>

我一直在搜索 SO 和网络以寻找解决方案，但没有看到太多帮助。我不确定这是否真的可能（由于模糊和选择丢失以及焦点和选择之间的联系）。我在another SO answer 中看到了一个名为preventDeselect 的样式属性 - 这不起作用，我什至没有这样的文档或浏览器支持。

我在这方面很挣扎，希望得到一些帮助：甚至说我根本无法做到这一点，或者可能还有一些路要走。

更新：仅作记录，我的用户场景，即文本选择和上下文菜单，是一个常见的场景（我没有想到）：只需在此页面（或输入类型字段）中选择一些文本并右键单击即可获取浏览器的默认上下文菜单 - 我的场景不同，因为我想使用自定义菜单，但与浏览器的上下文菜单具有相似的行为 - 通常允许选择一些文本，剪切/复制选择，在上下文菜单中导航不会丢失选定的文本。所以我认为应该有可能以某种方式:) 使用上下文菜单完成所有这些操作，并且仍然可以选择。

【问题讨论】：

你的意思是即使在失去焦点后你也想要文本框的值
是的，如果我跳过或误用了某些术语，请见谅；试图尽可能接近用户场景/视角来表达这一点。

标签： javascript jquery html css

【解决方案1】：

尝试回答您的这部分问题：

这种情况可能对应于我选择文本的用例在字段中，右键单击并显示自定义弹出菜单，但不要希望失去所选文本的焦点，因为我想做一些对先前选择的文本进行操作。

对于这个用例，我创建了一个快速小提琴：http://jsfiddle.net/4XE9a/1/

注意：我正在使用与 @David 的答案相同的 getSelection 函数。

如果您选择任何文本，然后右键单击输入，则会出现自定义弹出菜单。单击“选项 1”。你会发现即使焦点已经转移到那个锚标签上，选择并没有丢失。

但是，对于您关于将焦点转移到另一个文本框的问题的第二部分，@David 的回答就足够了。

更新：（在你的 cmets 之后）

请看这个更新的小提琴：http://jsfiddle.net/783mA/1/

现在，当您选择一些文本并右键单击输入时，它将显示带有三个选项的自定义弹出菜单。使用选项卡导航并按空格键或单击突出显示的选项。（由于时间不够，我无法实现向上/向下箭头键，但概念保持不变）

这表明您在评论中的问题是在导航菜单时选择仍然没有丢失。

注意：您希望在视觉上保持选择突出显示，并且在单击其他任何位置时不会丢失选择。请注意，这是不可能的，因为文本选择行为是操作系统实现的。浏览器、html 等在这里不起作用。一旦您单击选择上下文之外的任何位置，文本选择就会丢失。这是因为只要您点击外面的任何地方，系统就会开始期待新的选择。但是，没有文本表面的控件除外。按钮、滚动条箭头等不会导致选择丢失。

要查看此行为，请在小提琴中选择一些文本，然后单击左侧窗格中的任何下拉菜单。文本选择不会丢失，即使在视觉上也是如此。

这就是为什么在上面的新小提琴中，我特意使用按钮来演示。

【讨论】：

非常好，感谢您抽出宝贵时间；更具体一点（也许这应该是一个不同的问题） - 上下文菜单是否有可能显示为“可导航”（通过向上/向下键）但仍然不会在视觉上丢失选择？
@acostache，我刚回来。请参阅上面的更新答案。
非常酷！但概念代码仅在我这边的 IE 中有效（FF 或 Chrome 无效）:(。非常感谢您对此的帮助。很抱歉为此花费了您这么多时间。我会尝试看看是否可以让它在 Chrome 和/或 FF 中工作。
因为我只使用 Chrome，所以它最终在 Chrome 上运行。 IE 我不知道 ;)
这变成了一个更长的讨论，很抱歉打扰你，但也许它与操作系统有关 - 我正在使用 Win7 机器。如果这对你来说是一样的，那么我有点迷失了:)。

【解决方案2】：

您可以将每个选择保存在一个间隔中，然后在您喜欢的时候检索它。这是一个示例，当输入具有焦点时拉取选择并清除模糊间隔：

function getSelection(elm) {
    var start = elm.selectionStart;
    var end = elm.selectionEnd;
    return elm.value.substring(start, end);
}

$('input').focus(function() {
    var self = this;
    $(this).data('interval', setInterval(function() {
        $(self).data('selection', getSelection(self));
    },20));
}).blur(function() {
    clearInterval($(this).data('interval'));
});

现在你可以像这样：

$('#text2').focus(function() {
    console.log('selection in #text1 was: '+$('#text1').data('selection'));
});

演示：http://jsfiddle.net/qCCY5/

【讨论】：

感谢您的回答；我知道我可以保存间隔，但是当我关注其他内容时，我希望在视觉上不使用选择（比如让文本突出显示仍然存在）。希望我能正确表达自己:)。
@acostache 呃.. 喜欢$('input').blur(function(){$(this).focus()});?
是的，类似的东西，但仍然能够在第二个字段中使用/导航（我真正想要重点关注的字段，至少不会在视觉上丢失我选择的文本）-就像我告诉 abhitalks 的事情
@acostache 听起来您正在为特定场景寻求通用解决方案。在 HTML 中无法失去焦点但保持选择，因此您需要找到适合您特定需求的解决方法。
我在想这是否是唯一的方法。但似乎不可能在没有事件和连续间隔的情况下从元素中获取当前值。