-3
我正在做一个PHP-MySQL的小项目。在网页预览中，有一些带有ID的div。 div包含文本。我的问题是当选择文本的某个部分时，在该div中找到div-id，文本长度和文本位置。是否有可能使用JavaScript？请帮帮我。提前致谢。获取选定文本的ID
<!DOCTYPE html>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<style type="text/css">
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
}
.custom-menu li:hover {
background-color: #DEF;
}
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1000;
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
}
</style>
<?php
include("../viewmodel/PriviewModel.php");
include("../include/header.php");
$privewmodel = new PriviewModel();
if(isset($_SESSION["preview"])) {$privewmodel = $_SESSION["preview"];}
$count=0;
foreach($privewmodel->getTOPIC_NAME() as $topicname)
{
if($count==0) {
echo $topicname .'<br/><ul>';
}
else
{
echo '<li>'.$topicname.'</li>';
}
$count++;
}
?>
</ul>
<div style="padding: 2%">
<?php
$count=0;
foreach($privewmodel->getTOPIC_TEXT() as $topictext)
{
if($count==0) {
echo '<b>ভূমিকাঃ </b><br/><div id="'.$count.'" readonly rows="15" cols="150">'.$topictext .'</div><br/>';
}
else
{
echo '<div id="'.$count.'" readonly rows="15" cols="150">'.$topictext.'</div><br/><br/>';
}
$count++;
}
?>
</div>
<div id="overlay">
<div>
<form name="addhyperlink" method="post" action="../controller/UpdatePreviewController.php">
<?php foreach($privewmodel->getOnlytopic() as $topicname)
{
echo '<input type="radio" value="'.$topicname->topic_id.'" name="hyperlink" required/> '.$topicname->topic_name.'<br/>' ;
} ?>
<input id="sel" type="hidden" name="seltext" value="">
<input type ="submit">
</form>
</div>
</div>
<ul class='custom-menu'>
<li data-action="first">Add hyperlink</li>
<li data-action="second">Add embeded media</li>
<li data-action="third">Add kichu ekta</li>
</ul>
<script>
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
var text = getSelectionText();
if(text!='')
{
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
document.getElementById("sel").value = text;
}
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": addhyperlink(); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
function addhyperlink()
{
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
t = (document.all) ? document.selection.createRange().text : document.getSelection();
}
function getSelectionText(){
var selectedText = "";
if (window.getSelection){ // all modern browsers and IE9+
selectedText = window.getSelection().toString();
}
return selectedText;
}
function getdivID()
{
var ID = window.getSelection().valueOf("id");
alert(ID); // here lies the problem
}
</script>
<?php include("../include/footer.php");?>
[所选文本的HTML（的可能的复制http://stackoverflow.com/问题/ 4176923/html-of-selected-text） – Niloct
分享您的代码 –
我已经添加了 – agnichakra