Bir divun üzerine bir "duvar" nasıl oluşturabilirim ve içerdeki her şeyi tıklanabilir değil ve odaklanamaz hale getirebilirim?

Question

Mutlak konumlandırılmış bir div A var. Bu div A içinde, birkaç giriş kontrolü olabilir. Tüm bu kontrollerin tıklama etkinlikleriyle erişilemediğini istiyorum. Ayrıca, tab aracılığıyla erişilebilir olmalarını engellemek istiyorum, yani, odaklanmak. Onların ölü gibi olmasını istiyorum, ama görme engelli değil.

Bunu başarmanın en iyi yolu nedir?

Answer 1

Sen pointer-events: none ile fare eylemleri önleyebilir:

focusable olmaktan içeriğini önlemek için, bunlardan bazıları yapabilirsiniz:

• bir tabindex focus flag kümesi vardır her elemana negatif tabindex Set

  Varsayılan olarak, öğe hala odaklanabilecektir, ancak sıralı netlemeli gezinme kullanılarak erişilemez.

• onları inert

  Ancak, tüm belge etkisiz kılan kalıcı bir iletişim kutusu, haricinde bu yaparsınız herhangi bir şekilde bilmiyorum olun.

• Disable her eleman

  Not tüm unsurları odağı geri almak için

• Kullanım JS devre dışı bırakılabilir değil.

  focus (veya focusin) olayının iptal edilebileceğini unutmayın, ancak .blur() ile geri alabilirsiniz. focus yana

  olay heyeti isterseniz faz yakalamak dinIemeIisiniz, kabarcık yok

  element.addEventListener('focus', function(event) { 
      event.target.blur(); 
  }, true); 
  

Örnek:

document.querySelector('div').addEventListener('focus', function(e) { 
 
    e.target.blur(); 
 
}, true);

div { 
 
    pointer-events: none; 
 
}

<div> 
 
    <button type="button">I am a button</button> 
 
    <input type="button" value="I am an input button" /> 
 
    <input type="text" value="I am a text button" /> 
 
    <a href="javascript:void(0)">I am an anchor</a> 
 
</div>

Answer 2

vardır bir Bunu yapmanın birkaç yolu. Birincisi tüm elemanların tabindex değerini -1 olarak ayarlamaktır. Diğeri ise tabindex hakkında endişe etmemek ve modalda değilseniz sadece sekmeyi tıkamaktır.

Bu temel fikir, sekmelere izin vermek için tam bir çözüm değil. Bu, modalda bulunup bulunmadığınızı nasıl algılayacağınızı ve modalda olmadığınız zaman iptal edeceğinizi görmenizi sağlar.

Modalda son metin kutusunda olup olmadığınızı veya vardiya sekmesi olan ilk durumda olup olmadığınızı görmek için koda daha fazla mantık eklemeniz gerekir.

(function() { 
 
    var allow = false, 
 
     isModalActive = true; 
 
    document.getElementById("overlay").addEventListener("keydown", function(evt){ 
 
     var keyCode = evt.keyCode || evt.which; 
 
     if (keyCode === 9) { 
 
      allow=true; 
 
     } 
 
     //TODO FOR YOU determine if the current element is on the last textbox and than you would need to loop to the first element in the textbox. Also need to detect if it is shift tab for the first element... 
 
     
 
    }); 
 
    document.body.addEventListener("keydown", function(evt){ 
 
     var keyCode = evt.keyCode || evt.which; 
 
     if (isModalActive && keyCode === 9 && !allow) { 
 
      evt.preventDefault(); 
 
     } 
 
     allow=false; 
 
    }); 
 
}());

#overlay{ 
 
    border: 1px solid black; 
 
    background-color: #CCC; 
 
    padding: 2em; 
 
}

<input type="text"> 
 
<div id="overlay"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
</div> 
 
<input type="text"> 
 

bindirme ve yalnızca yerleşim olarak ne zaman çalışmaya sekme için izin formu içindeki