-3
Ich mache ein kleines Projekt in PHP-MySQL. In einer Webvorschau gibt es ein div mit IDs. Das div enthält Texte. Mein Problem besteht darin, die Div-ID, die Textlänge und die Position des Textes in diesem Div zu finden, wenn ein Teil des Textes ausgewählt ist. Ist es mit Javascript möglich? Bitte hilf mir. Danke im Voraus.ID des ausgewählten Textes
<!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");?>
Mögliches Duplikat [HTML ausgewählten Textes] (http://stackoverflow.com/ Fragen/4176923/html-of-selected-text) – Niloct
Teilen Sie Ihren Code –
Ich habe es hinzugefügt – agnichakra