gpt4 book ai didi

javascript - 如何防止在 html 中取消选择模糊(焦点丢失)的选定文本

转载 作者:太空狗 更新时间:2023-10-29 15:08:35 26 4
gpt4 key购买 nike

这几天我一直在研究这个听起来很简单的问题,但我没有看到任何结果。

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

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

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

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

我为此苦苦挣扎,希望能得到一些帮助:甚至说我根本做不到,或者可能还有一些办法。

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

最佳答案

尝试回答您问题的这一部分:

Such a situation could correspond to a use-case in which I select text in a field, right-click and display a custom popup menu, but do not wish to lose focus of selected text, because I want to do some operations on the previously selected text.

对于这个用例,我创建了一个快速 fiddle : http://jsfiddle.net/4XE9a/1/

注意:我使用与@David 的回答相同的getSelection 函数。

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

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

更新:(在您的评论之后)

请查看更新后的 fiddle : http://jsfiddle.net/783mA/1/

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

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

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

要查看此行为,请在 fiddle 中选择一些文本,然后单击左 Pane 中的任何下拉菜单。文本选择不会丢失,即使在视觉上也是如此。

这就是为什么在上面的新 fiddle 中,我特意使用按钮来演示。

关于javascript - 如何防止在 html 中取消选择模糊(焦点丢失)的选定文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20285875/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com