问在文本高亮显示上弹出
EN

Stack Overflow用户

提问于 2021-12-13 12:48:14

回答 1查看 220关注 0票数 0

今天早上，我一直在环顾四周，似乎什么都没起作用，我正在尝试做一些类似于概念的东西，当你在文本区域突出显示文本时，弹出会显示你可以在哪里编辑文本。我可以整理一下框中按钮的功能，但是我不知道应该使用什么来触发一种关于突出显示的事件，从而在一个相对于突出显示的位置弹出这个框。到目前为止，我链接了这个概念，引用了我的站点和HTML代码。概念参考我现在的网站

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Study App</title>
    <link rel="stylesheet" href="study.css" />
    <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>

    <script src="study.js"></script>


    <div class="dropdown">


      <nav><label for="touch"><span>Settings</span></label>
        <input type="checkbox" id="touch"/>


        <ul class="slide">
          <li><a><div class="dark"><button onclick="myFunction()">
          <input class="toggle" type="checkbox"/></button></div></a></li>
          <li><a href="#"></a></li>
        </ul>
      </nav>
    </div>


</div>



<div class="arrowdown">
  <input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i class="fas fa-angle-right dropdown"></i></button>
  <div class="pages">
    <a href="#" class="sub-item">Add Page</a></div>
  </div>
</div>

<script type="text/javascript">

var checkBox = document.getElementById("myCheckbox");
  
  function rotateElem() {
    if (checkBox.checked == false)
    {
      document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(90deg)';
    }
    else {
    document.querySelector('.fas.fa-angle-right.dropdown').style.transform= 'rotate(0deg)';
    }   
}
</script>

      
<div class="tabs"></div>


    <div class="sidebar">
      <div class="sidebar-top">
        <h1><span class="study">Study</span><span class="app">App</span></h1>
    </div>
 
    
    <div class="side-title">
      <textarea class="longInput" spellcheck="true" placeholder="Untitled" cols="5" rows="1"></textarea>
      </div>

<div class="title">
  <textarea class="longInput" spellcheck="true" placeholder="Untitled" cols="30" rows="1"></textarea>
  </div>

    <div class="textbox">
      <textarea class="shortInput" spellcheck="true" placeholder="Start typing..." cols="30" rows="10"></textarea>
    </div>

    <script>
      
let value = ''

const elements = document.querySelectorAll('.longInput')
for (let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('change', handleChange)
  elements[i].addEventListener('keyup', handleChange)
}

function handleChange(e) {
  value = e.target.value
  for (let i = 0; i < elements.length; i++) {
    elements[i].value = value
  }
}
    </script>
  

    <script type="text/javascript">
      $('.pages').hide();
      $(document).ready(function(){
        $('#myCheckbox').click(function(){
          $('.pages').slideToggle();
        });
      });
    </script>

    <script src="study.js"></script>

  
  </body>
</html>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-13 13:07:50

看看这段代码

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

var pageX;
var pageY;

$(document).ready(function() {
    $(document).bind("mouseup", function() {
        var selectedText = x.Selector.getSelected();
        if(selectedText != ''){
            $('ul.tools').css({
                'left': pageX + 5,
                'top' : pageY - 55
            }).fadeIn(200);
        } else {
            $('ul.tools').fadeOut(200);
        }
    });
    $(document).on("mousedown", function(e){
        pageX = e.pageX;
        pageY = e.pageY;
    });
});

在这里找到一个工作演示！Codepen.io

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70334928

复制

相似问题

问在文本高亮显示上弹出
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在文本高亮显示上弹出EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在文本高亮显示上弹出
EN