1
私はこのコードを持っています。テキストが選択され、スペースだけでなくdivも表示されます。しかし、私がdivで何もしないと、選択が削除されます。 DIVはまだそこにいる。 選択肢が空であるかどうかをチェックして、divを非表示にしますか？divを非表示にすると、テキスト選択が空白になりますか？
$("#actual_verse").mouseup(function() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
if (/\S/.test(text)) {
// Tool Tip
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1 = document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2 = document.createRange();
rel2.selectNode(document.getElementById('cal2'));
if (!sel.isCollapsed) {
var r = sel.getRangeAt(0).getBoundingClientRect();
var rb1 = rel1.getBoundingClientRect();
var rb2 = rel2.getBoundingClientRect();
//this will place ele below the selection
ele.style.top = (r.bottom - rb2.top) * 100/(rb1.top - rb2.top) + 'px';
//this will align the right edges together
ele.style.left = (r.left - rb2.left) * 100/(rb1.left - rb2.left) + 'px';
//code to set content
ele.style.display = 'block';
}
// End of Tool Tip
}
});/* Tool Kit */
#tooltip {
position:absolute;
display: none;
border:grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
#cal1{
position:absolute;
height:0px;
width:0px;
top:100px;
left:100px;
overflow:none;
z-index:-100;
}
#cal2{
position:absolute;
height:0px;
width:0px;
top:0;
left:0;
overflow:none;
z-index:-100;
}
.boxes {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box {
background: #AAF6FF;
}
#green_box {
background: #D6FFAA;
}
#orange_box {
background: #FFBF98;
}
#purple_box {
background: #D7D5FC;
}
#red_box {
background: #FF9B9F;
}
#yellow_box {
background: #FFF8AA;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>Lorem ipsum dolor sit amet, doctus expetendis no vel. At vis doming viderer prompta. Ut vis consul atomorum pericula, an sed sonet suscipit lobortis. Eos tale atqui iriure ne, eos in delenit corpora, nec laudem everti ei.</span>
<div id='cal1'> </div>
<div id='cal2'> </div>
<div id='tooltip'>
<div id='blue_box' class='boxes' title='blue_mark'></div>
<div id='green_box' class='boxes' title='green_mark'></div>
<div id='yellow_box' class='boxes' title='yellow_mark'></div>
<div id='orange_box' class='boxes' title='orange_mark'></div>
<div id='purple_box' class='boxes' title='purple_mark'></div>
<div id='red_box' class='boxes' title='red_mark'></div>
</div>
なぜそんなにバグが？それはいつも働くとは限りません... – user6791369
そしてどんな場合にそれは働かないのですか？あなたが明確にすることができれば – Vibhaj
私は本当に何の原因で説明することはできません。それはランダムであるようです。あなたはそれを試すことができますか？何かをクリックしてみてください。時々、divはまだそこにあるでしょう... – user6791369