DIVをハイライト表示してから非表示

Question

特定のテキストをハイライト表示するときに、非表示のdivタグを表示しようとしています。

（私はspanタグのIDまたは類似のものを使用して仮定）特定のテキストを強調表示するときに表示さ

のみ

1. ：私はハイライト表示に表示する非表示のdiv要素を取得することができたが、私は達成することができない2つの部分があります

   表示がブロックに変更された後、5秒後に表示を非表示に戻します。

これは私の試みです。繰り返しになりますが、これはハイライト時の隠れたdivを表示しますが、それは私が得た限りです。助けてください！

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

あなたは古く古いコードを使用しています。ここでは現代的なアプローチです：

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

あなたは非常に近いです！

は、ここで私が持っているものです。

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>

変更：

• あなたは "window.getSelection（）" 機能によって強調されているかどうか確認する必要があります。あなたがたsetTimeout
• 隠しに文字列を渡した
• が有効な表示オプションではありません、どれもだからあなたは知っている、それは一般的にだけでタグの外に出回っテキストを持っている悪い習慣だ

ではありません。したがって、最初の2行を<p>タグなどに貼り付けるのが最善です。

Answer 3

これは私があなたのために何をしたかです。 Iセットアップ間隔。それはあなたがマウスout.Orするとあなたのdivのスタイルがページ上のブロックであるかどうかをチェックします。 希望は、これはあなたがあなたのブラウザでどのようなエラーが出るん 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"; 
}