Question

我一直在研究这个简单的声音问题几天，我没有看到任何结果。

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

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

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

<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的样式属性 - 这不起作用，我甚至没有这样的文档或浏览器支持。

我正在努力解决这个问题并希望得到一些帮助：甚至说我根本无法做到这一点或者可能有某些方法去做。

更新的：仅仅为了记录，我的用户场景，指的是文本选择和上下文菜单，是一个常见的（它让我想到提醒）：只需在此页面（或输入类型字段）中选择一些文本，然后右键单击得到浏览器的默认上下文菜单 - 我的情况不同，我想使用自定义菜单，但与浏览器的上下文菜单有相似的行为 - 通常允许选择一些文本，剪切/复制选择，在上下文菜单中导航而不会丢失所选文本。所以我认为应该可以用某种方式:)用上下文菜单做所有这些事情并仍然有你的选择。

Answer 1

试图回答你问题的这一部分：

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

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

注意：我使用@ David的回答中的getSelection函数。

如果选择任何文本然后右键单击输入，则会出现自定义弹出菜单。单击“选项1”。您会发现即使焦点已转移到该锚标记，选择也不会丢失。

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

更新：（在您发表评论后）

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

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

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

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

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

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

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

如何防止在html中取消选择模糊（焦点丢失）上的文本

2 个答案: