焦点改变时保持文本选择

时间：2023-08-07

本文介绍了焦点改变时保持文本选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个普通的文本框和一个带有文本输入的灯箱.

I have a normal textbox, and a lightbox with a text input.

我想将用户的选择保留在文本框中，即使用户专注于灯箱的文本输入.

I want to keep the user's selection in the textbox, even when the user focuses on the lightbox's text input.

在普通文本框中选择文本
切换灯箱
专注于灯箱输入

在第 3 步，用户的文本选择被丢弃.如何防止这种情况?例如，请参阅 Google 文档链接插入灯箱.

At step 3., the user's text selection is discarded. How can this be prevented? See Google docs link insertion lightbox for example.

谢谢:)

更新

好的，所以 Google 文档使用 iframe 作为空白页部分，这就是他们处理多项选择的方式.像这样的东西(请原谅令人作呕的 HTML):

Ok, so Google docs uses an iframe for the blank page section, which is how they are handling the multiple selections. Something like this (excuse the disgusting HTML):

// test.html
<html><body>
  <h1 onclick='lightbox();'>This is the main section</h1>
  <iframe src='frame.html'></iframe>
  <div id='lightbox' style='display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; background-color: black;'>
    <input type='text' name='url' />
  </div>
  <script type='text/javascript'>
    function lightbox() {
      document.getElementById('lightbox').style.display = 'block';
    }
  </script>
</body></html>

// frame.html
<p>This is my iframe</p>

iframe 中的文本选择独立关注灯箱中的输入.因此，如果选择了一些文本这是我的 iframe"，然后切换灯箱并将光标放在输入中，则 iframe 的文本选择会在没有任何 javascript 的情况下持续存在.

Text selection in the iframe is independent of focus on the input in the lightbox. So if some of the text 'This is my iframe' is selected, then the lightbox is toggled and the cursor placed in the input, the iframe's text selection persists without any javascript.

我现在正在尝试 Nickolay 的建议.

I'm trying Nickolay's suggestion now.

推荐答案

来自如何在打开 jQuery 对话框时保留文本选择:您必须在模糊时保留选择并将其恢复为焦点:

From How to preserve text selection when opening a jQuery dialog: you have to preserve selection on blur and restore it on focus:

$("dialog").focus(function() {
  // save the selection
}).blur(function() {
  // set the text selection
});

设置选择(来自 jQuery 在文本区域中设置光标位置):

$.fn.selectRange = function(start, end) {
  return this.each(function() {
    if(this.setSelectionRange) {
      this.focus();
      this.setSelectionRange(start, end);
    } else if(this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd('character', end);
      range.moveStart('character', start);
      range.select();
    }
  });
};
$('#elem').selectRange(3,5);

获得选择:http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html

这篇关于焦点改变时保持文本选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：如何在 Javascript 中动态添加文本框? 下一篇：附加事件以清除 IE10 文本框中的图标

焦点改变时保持文本选择

问题描述

推荐答案

相关文章

最新文章