隐藏div是否基于文本选择是否为空？

Question

I have this code, if a selection is made on some text and it's not only a space, a div appears. But, if I do nothing on the div and the selection is removed. The div is still there. Is there some to check if the selection is empty, then hide the 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'>&nbsp;</div> <div id='cal2'>&nbsp;</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> 

Answer 1

Try the following:

 function selectionHandler() { 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 } else { var ele = document.getElementById('tooltip'); ele.style.display = 'none'; } } $("#actual_verse").click(selectionHandler); $("#actual_verse").keypress(selectionHandler); $("body").click(selectionHandler); 

 /* 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'>&nbsp;</div> <div id='cal2'>&nbsp;</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>