javascript - 当其中的输入具有焦点时，保持非事件导航选项卡显示

Question

我目前正在使用 reactjs 开发一个元素，我想使用 link 标签一个一个地显示错误消息，这个链接可以引用 div、p、input、button 等任何 html 元素。

单击链接，应聚焦并显示相应的 html 元素。

现在的问题是，有时目标元素位于隐藏的选项卡或 div 中，我无法聚焦它

例如在一个非事件选项卡中，我是否有机会使其处于事件状态，然后聚焦该元素？

这是一个简单的例子:

 

function openCity(cityName) { 
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";
}

const findIt = () => {  
  document
    .getElementById("target")
    .focus(); 
};

.w3-container {
  margin-top:16px;
  margin-bottom:16px;
  }
 
 .w3-container:after,.w3-container:before {
   content:"";
   display:table;
   clear:both
 }
 
 .w3-bar .w3-bar-item{
   padding:8px 16px;
   float:left;
   width:auto;
   border:none;
   display:block;
   outline:0
} 

.w3-black{ 
  color:#fff!important;
  background-color:#000!important 
}

.w3-button{
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:nowrap
}
 
 

<div class="w3-container">
      <h2> 3 Tabs below :</h2> 
    </div>

    <div class="w3-bar w3-black">
      <button class="w3-bar-item w3-button" onclick="openCity('London')">
        London
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Paris')">
        Paris
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">
        Tokyo
      </button>
    </div>

    <div id="London" class="w3-container city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="w3-container city" style="display:none">
      <h2>Paris</h2>
      <input value="im ere ry o ind" id="target" />
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="w3-container city" style="display:none">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
    </div>
     <br /><br /><br />
    <button onclick="findIt()">click to focus input inside PARIS tab</button> 
   
 

所以它只有在 Paris 处于事件状态时才有效

Answer 1

好吧，这就是我解决的问题 - 我已经解决了，因此即使未选择该选项卡，也可以使用巴黎选项卡中的输入字段。

我绝不会推荐在 css 中使用 display:none。它完全隐藏了元素，并且 javascript 需要它可以获得的每一点脚手架才能正确地完成它的工作。相反，您可以创建一个在视觉上隐藏内容但在代码空间中呈现的类。在这种情况下，我创建了一个 css 类，它将隐藏分配给它的 div 中的所有内容。这使得 Javascript 的选择器仍然可以访问内容，但除非类被删除，否则不会出现。在 javascript 文件中，我真正做的就是删除类并将其添加到元素，就像您使用 display:none 一样。

为了进一步阅读，我建议阅读以下关于 css 技巧的主题: https://css-tricks.com/forums/topic/is-display-none-the-right-way-to-hide-an-element/

function openCity(cityName) { 
  var i;
  var x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
     x[i].classList.add("hidden-visually");
    }
  document.getElementById(cityName).classList.remove("hidden-visually");
}

const findIt = () => {  
  document
    .getElementById("target")
    .focus(); 
};

.hidden-visually{
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
}

.w3-container {
  margin-top:16px;
  margin-bottom:16px;
  }
 
 .w3-container:after,.w3-container:before {
   content:"";
   display:table;
   clear:both
 }
 
 .w3-bar .w3-bar-item{
   padding:8px 16px;
   float:left;
   width:auto;
   border:none;
   display:block;
   outline:0
} 

.w3-black{ 
  color:#fff!important;
  background-color:#000!important 
}

.w3-button{
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:nowrap
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w3-container">
      <h2> 3 Tabs below :</h2> 
    </div>

    <div class="w3-bar w3-black">
      <button class="w3-bar-item w3-button" onclick="openCity('London')">
        London
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Paris')">
        Paris
      </button>
      <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">
        Tokyo
      </button>
    </div>
    


    <div id="London" class="w3-container city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="w3-container city hidden-visually">
      <h2>Paris</h2>
      <input value="im ere ry o ind" id="target"/>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="w3-container city hidden-visually">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan.</p>
    </div>
     <br /><br /><br />
    <button onclick="findIt()">click to focus input inside PARIS tab</button>