Show DIV On Highlight Dann Ausblenden

Question

Ich versuche eine versteckte Div-Tag-Anzeige zu haben, wenn ich einen bestimmten Text hervorhebe. Ich konnte eine versteckte div auszukommen hervorgehoben angezeigt werden, aber die 2 Teile ich nicht sind ausführen kann:

1. nur zeigen, wenn bestimmten Text markiert (I eine span-Tag-ID oder etwas ähnliche assume verwenden)

2. Nachdem die Anzeige in den Block geändert wurde, ändern Sie sie nach 5 Sekunden wieder in den Modus "Versteckt".

Hier ist mein Versuch. Wiederum zeigt dies das versteckte div auf Hervorhebung, aber das ist so weit wie ich habe. Bitte helfen Sie!

function ShowNote() { 
 
    document.getElementById('Note').style.display = 'block'; 
 
} 
 

 
document.onmouseup = ShowNote; 
 
if (!document.all) document.captureEvents(Event.MOUSEUP); 
 

 
function HideNote() { 
 
    document.getElementById('Note').style.display = 'hidden'; 
 
} 
 
setTimeout("HideNote()", 5000); // after 5 secs

I DON'T want it to show when I highlight this text 
 
<br />I DO want it to show when I highlight this text. 
 
<div type='text' id='Note' style="display:none;">HIDDEN DIV CONTENT</div>

Answer 1

Sie verwenden ziemlich alten und antiquierten Code. Hier ist der moderne Ansatz:

function showNote() { 
 
    document.getElementById('Note').classList.remove("hide"); 
 
    setTimeout(hideNote, 5000); // after 5 secs 
 
} 
 

 
function hideNote(){ 
 
    document.getElementById("Note").classList.add("hide"); 
 
} 
 

 
document.getElementById("select").addEventListener("mouseup", showNote);

.hide { display: none; } 
 

 
#select { color:red; }

<div>I DON'T want it to show when I highlight this text</div> 
 
<div>I DO want it to show when I highlight <span id="select">this text</span>.</div> 
 
<div type='text' id='Note' class="hide">HIDDEN DIV CONTENT</div>

Answer 2

Sie sind ganz in der Nähe!

Hier ist, was ich habe:

function ShowNote() { 
 
    if(window.getSelection() == "I DO want it to show when I highlight this text.") 
 
     document.getElementById('Note').style.display = 'block'; 
 
     setTimeout(function(){ 
 
     \t document.getElementById('Note').style.display = 'none'; 
 
     }, 5000); // after 5 secs 
 
    } 
 
    
 
    document.onmouseup = ShowNote; 
 
    if (!document.all) document.captureEvents(Event.MOUSEUP);

I DON'T want it to show when I highlight this text<br /> 
 
    I DO want it to show when I highlight this text. 
 
    <div type='text' id='Note' style="display:none;" >HIDDEN DIV CONTENT</div>

Änderungen:

• Sie müssen prüfen, was über die "window.getSelection()" Funktion markiert ist.
• Sie wurden ein String
• versteckt ist Option keine gültige Anzeige SetTimeout vorbei, keiner ist

So wissen Sie, es in der Regel eine schlechte Praxis ist Text nur noch um Tags außerhalb des Schwebens. So ist es am besten, Ihre ersten zwei Zeilen in <p> Tags oder etwas zu kleben.

Answer 3

Dies ist, was ich für Sie getan haben. I Setup-Intervall. das passiert jedes Mal, wenn Sie die Maus ausziehen. Oder noch besser, es wird prüfen, ob es der Stil Ihres DIV ist Block auf der Seite. this helps Live exapmle on Codepen

var target = document.getElementById('note'); 

var i = setInterval(function(){ 
    if (document.getElementById("note").style.display == 'block') { 
    hide(); 
    } 
}, 5000); 

function showNote() { 
    target.style.display = 'block'; 
} 
function hide(){ 
document.getElementById("note").style.display = "none"; 
}