Javascript 如何在突出显示文本时创建一个小弹出窗口，并在单击弹出窗口时将焦点更改为搜索栏？_Javascript_Html_Css_Popup

Javascript 如何在突出显示文本时创建一个小弹出窗口，并在单击弹出窗口时将焦点更改为搜索栏？

javascript html css

Javascript 如何在突出显示文本时创建一个小弹出窗口，并在单击弹出窗口时将焦点更改为搜索栏？,javascript,html,css,popup,Javascript,Html,Css,Popup,我想在选择文本时显示一个弹出窗口。当用户点击弹出窗口时，焦点会变为搜索栏，选择的文本就是它的值在stack overflow中的一些答案的帮助下，我成功地了解了所选文本的属性并将其值存储在变量中，当单击搜索输入框时，所选文本就会出现在那里。下面是它的代码： let maintext ="" let text = "" let search = document.getElementById("searchs") function ge

我想在选择文本时显示一个弹出窗口。当用户点击弹出窗口时，焦点会变为搜索栏，选择的文本就是它的值

在stack overflow中的一些答案的帮助下，我成功地了解了所选文本的属性并将其值存储在变量中，当单击搜索输入框时，所选文本就会出现在那里。下面是它的代码：

let maintext =""
let text = ""
let search = document.getElementById("searchs")
function getSelectionText() {

  var activeEl = document.activeElement;
  var activeElTagName = activeEl.tagName.toLowerCase()
  if (
    (activeElTagName == "textarea") || (activeElTagName == "input" &&
    /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
    (typeof activeEl.selectionStart == "number")
  ) {
      text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
      console.log(text);
  } else if (window.getSelection) {
      text = window.getSelection().toString();
      text;
  } 
  maintext = text;
}

 document.onmouseup = document.onkeyup =document.onselectionchange = function() {
   getSelectionText();


 search.addEventListener('focus',function(e){
   console.log(maintext)
   search.value = maintext
   console.log(search.value)

 })

所以现在我想在用户选择完文本后创建一个弹出窗口，当用户点击弹出窗口时，焦点应该转到搜索栏

我找到了一些创建弹出窗口的方法，但所有这些方法都是在我单击某些元素（如）后才显示的

html文件如下所示：

<body >
    <h1>
      Hello this is trial;
    </h1>
    <p>
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil officia, aliquid debitis vel consequatur nesciunt dolores at eaque. Ullam provident ipsum soluta molestias in error necessitatibus molestiae quia ducimus facilis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi repellat ipsa asperiores suscipit! Natus quae neque voluptatem est, perspiciatis ratione, nulla modi soluta nesciunt cumque, quibusdam nam. Quam, sint quisquam.
      </p>
      <br>
<input value="Some text in a text input">
<br>
<input id = "searchs" type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>
<br><br>


你好，这是审判；

Lorem ipsum，dolor sit amet Concertetur Adipising Elite。从官方角度看，在eaque，流动性债务将被视为一种消费。Ullam provident ipsum soluta Molectias in error（错误的同侧解决方案）必须使用面部护理工具。我的同僚们都是精英。莫迪·雷佩拉·伊帕·阿斯佩里奥雷斯·苏西比特！自然之水是自然之水，是理性之水，是自然之水，是自然之水。奎姆，圣奎斯奎姆。









文本区域中的一些文本