everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development


Ignoring User Input Events From Pure HTML: Introducing the Inert Attribute

Ignoring User Input Events From Pure HTML: Introducing the Inert Attribute

HTML inert is an attribute to inform the browser to ignore user input events for the element, including user events like focus, hover, click, and events from assistive technologies. Besides that, the browser may also ignore page search and text selection within the element. 

HTML attribute:inert
Value type:boolean

Sample html:

<!--not inert-->
  <p>not inert</p>
  <input type ="text" />

<div inert>
   <input type ="text" />

By declaring inert on the div, the browser will ignore all user interactivity for the elements within the div:

  1. Browser will ignore text selection within the div
  2. Browser will ignore focus and hover event within the div
  3. Elements within the div are not clickable, selectable & editable


Example: Trap user focus within popup modal
Ignoring User Input Events From Pure HTML: Introducing the Inert Attribute - Trap user focus within popup modal

Although some of the background’s contents are not fully covered by the popup modal, by adding inert within the background div, the content will become unclickable and unelectable.

Sample html:

       font-size: 15px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        color: white;
        background: rgba(0,0,0,0.8);
        padding: 20px;
<div inert>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dolor lorem, condimentum at magna quis, bibendum dictum massa. Mauris gravida porttitor mauris, vitae fermentum ex faucibus nec. Vestibulum finibus, mi id blandit pharetra, tortor tellus euismod dolor, ac pellentesque quam purus sed tellus. Sed scelerisque lacus eu tortor malesuada, quis vehicula urna sollicitudin. Curabitur posuere, erat vitae finibus eleifend, elit sem venenatis tellus, sit amet congue sapien risus eu urna. Nunc consequat suscipit felis ut convallis. Curabitur cursus enim libero, vel semper dolor ullamcorper nec. Nunc pharetra orci egestas diam feugiat viverra. Morbi et ligula tempor, sagittis nunc eu, rutrum magna. Curabitur luctus maximus nulla, ac blandit lorem facilisis vitae. Donec sit amet condimentum lacus. Donec sed sapien scelerisque, feugiat mi mattis, efficitur ex. Nunc bibendum, justo et congue efficitur, sem augue laoreet velit, a volutpat ipsum sapien in sem. Nunc ac urna feugiat, interdum erat eu, semper nibh. Pellentesque non porta ipsum, ut efficitur lectus.
<div class="popup_modal">
     <p>User can only focus on this popup, even some that is not fully covered by the popup modal, the rest of page is not clickable/selectable</p>
     <button id="button2">button</button>
     <input type ="text" />

Browser Compatibility

Chrome 102
Edge 102
Safari 15.5
Opera 88
Internet Explorer
Chrome Android 102
WebView Android 102
iOS Safari 15.5
Firefox Android
Opera Android 70
Samsung Internet

Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert#browser_compatibility


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount


Or enter a custom amount


Thank you for your contribution!



CSS (27) css pseudo (3) debug (2) design (4) fonts (2) html (6) image (8) layout (5) optimization (10) performance (9) responsive (8) Software-development (1)


Recent Post:


Related Posts

%d bloggers like this: