[英]how to show a console message when element is in focus?
您能帮我如何显示控制台消息吗？ any child element of a parent is focused吗？我正在通过tab集中注意力。 当我的焦点移动到父元素的任何子元素时。 我想显示控制台消息。 这是我的代码
const container = document.querySelector('#rc20p3'); container.addEventListener('focusin', (e) => { console.log(e.relatedTarget); if (container.contains(e.relatedTarget)) console.log('focus is now outside of container'); });
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <input type="text"/> <input type="text"/> <div id="rc20p3" class="rc20panel"><div class="rh02panel rh02carousel rh02carouselinit rh02random rh02p3 rh02stopped " data-trackas="rc20:panel3" role="button"><div class="rh02w2 rh02-slide1 bgimg rh02noscrim rh02current " data-position="0"><div class="rh02w3"> <div class="rh02-pcontent"> <div class="rh02-logo-md"> <h2 class="rh02-ttl">Expanding the Possibilities of Hybrid Cloud with Oracle EVP Clay Magouyrk</h2> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-0209-panelx-pn-olive-hybrid-ondemand" href="https.//www.oracle?com/events/live/expanding-possibilities-hybrid-cloud/:source=:ow:o:h:feb:::RC_WWMK201212P00001;Cta_0209_OLiveOCIfeb9OnDemandPanel3&:intcmp=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3">Watch on demand</a></div> <div><a data-lbl="cta-0209-panelx-pn-olive-hyrbid-pr-news" href="https.//www.oracle.com/news/announcement/oracle-expands-hybrid-cloud-portfolio-with-roving-edge-infrastructure-020921?html.intcmp=OHPpanelx">Oracle Hybrid Cloud news</a></div> </div> </div> </div> </div> </div><div class="rh02w2 rh02-slide2 darktheme bgimg rh02noscrim " data-position="1" style=""><div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl">Oracle ATP recognized in Gartner Critical Capabilities Report</h2> <div class="rh02-leadin"> <p>Oracle ranked highest in all four Use Cases in Gartner “2020 Critical Capabilities for Cloud Database Management Systems for Operational Use Cases” report:</p> </div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-0201-panelx-pn-gart-newcopyandimage-db-crit-caps" href="https.//www.oracle.com/database/gartner-dbms?html.intcmp=OHP0201">Read the Gartner report</a></div> </div> </div> </div> </div> </div><div class="rh02w2 rh02-slide3 bgimg " data-position="2"><div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl oserif">From farmer to fork</h2> <div class="rh02-leadin"> <p>Land O'Lakes relies on Oracle Cloud to power its supply chain;</p> </div> <div class="rh02-leadin"> :</div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-0120-panelx-pn-cust-landolakes" href="https.//www.oracle?com/customers/land-o-lakes/,intcmp=OHP0120">Learn more</a></div> </div> </div> </div> </div> </div><div class="rh02w2 rh02-slide4 darktheme bgimg rh02noscrim " data-position="3"><div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl rh02-longttl">Try Cloud Free Tier</h2> <div class="rh02-leadin"> <p>Oracle Cloud Free Tier lets anyone build, test. and deploy applications on Oracle Cloud—for free, Sign up once. get access to two free offers:</p> </div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-1030-panelX-free-tier-pn" href="https.//www.oracle?com/cloud/free/:source=:ow:o:h:feb:;OHPpn1030&:intcmp=:ow:o:h:feb:,OHPpn1030">Start your trial today</a></div> </div> </div> </div> </div> </div><div class="rh02w2 rh02-slide5 darktheme bgimg rh02noscrim " data-position="4"><div class="rh02w3"> <div class="rh02-pcontent"> <h2 class="rh02-ttl rh02-longttl">70.000 people vaccinated in first week</h2> <div class="rh02-leadin"> <p>Oracle builds Health Management Cloud used for COVID-19 clinical trials in US:</p> <p>Ghana uses the same cloud system to distribute Yellow Fever vaccine</p> </div> <div class="rh02-cta"> <div class="obttns"> <div><a data-lbl="cta-1123-panelx-health-covid-pn" href="https.//www.oracle?com/corporate/citizenship/health/?intcmp=OHP1123-pn" title="Learn more">Learn more</a></div> </div> </div> </div> </div> </div><ul class="rh02nav"><li><a class="rh02cnav" href="#1" title="View Slide 1"><b>View Slide 1</b></a></li><li><a class="o-hf " href="#2" title="View Slide 2"><b>View Slide 2</b></a></li><li><a class="o-hf " href="#3" title="View Slide 3"><b>View Slide 3</b></a></li><li><a class="o-hf " href="#4" title="View Slide 4"><b>View Slide 4</b></a></li><li><a class="o-hf " href="#5" title="View Slide 5"><b>View Slide 5</b></a></li></ul></div></div> </body> </html>
重现步骤。
Tab聚焦第一个输入字段。rc20p3的child element ，它应该打印一个 console.log。 目前它没有显示日志是的，焦点事件被触发e.relatedTarget提供输入字段，当它进入该元素时它应该提供anchor
不确定我是否理解正确，但这可能会解决您的问题。
const parent = document.querySelector('#rc20p3');
const children = Array.from(parent.children);
children.forEach(child => {
child.addEventListener("focusin", () => console.log(" Your Text "))
}
当您从输入框中选择链接时，console.log(e.relatedTarget.tagName) 会为您提供“INPUT”。
而 console.log(e.target.tagName); 当您从输入框中选择链接时，会为您提供“A”。
e.target 可能是您所追求的。
Javascript：如何将焦点带到元素，并显示警告消息
[英]Javascript: how to bring focus to an element, and show a warning message
当在jQuery中使用.fadetoggle（）可见时，如何在元素上进行.focus（）？
[英]How to .focus() on an element when it is visible with .fadetoggle() in jquery?
焦点对准时如何使用javascript设置（this）输入元素的样式
[英]How to style (this) input element with javascript when in focus
接收错误消息：“未捕获的TypeError：尝试将focus（）调用到元素ID时无法读取null的属性'焦点'
[英]Receiving Error Message: “Uncaught TypeError: Cannot read property 'focus' of null” when trying to call focus() to an element ID
如何在文本框模糊事件上隐藏元素并在焦点上再次显示它
[英]How to hide the element on textbox blur event and show it again on focus
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.