今天早上我一直在環顧四周，似乎沒有任何效果我正在嘗試制作類似概念的東西，當您在文本區域中突出顯示文本時，彈出視窗將顯示您可以編輯文本的位置。我可以整理出框中按鈕的功能，但我不知道我應該使用什么來觸發某種 on highlight 事件以在相對于突出顯示的位置彈出此框。到目前為止，我將這個概念鏈接到了我的網站和我的 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/[email protected]/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>
uj5u.com熱心網友回復：
看看這個代碼
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/380001.html
標籤：javascript html css