javascript - 当其中的输入具有焦点时,保持不活动的导航选项卡显示
问题描述
我目前正在使用 reactjs 进行项目,我想使用链接标签一一显示错误消息,此链接可能指的是 div、p、输入、按钮任何 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>
所以它只有在巴黎活跃时才有效
解决方案
好吧,这就是我解决的问题——我已经做到了,因此即使未选择该选项卡,也可以使用“巴黎”选项卡中的输入字段。
我永远不会推荐在 css 中使用 display:none 。它完全隐藏了元素,并且 javascript 需要它可以得到的每一点脚手架才能正确地完成它的工作。相反,您可以创建一个在视觉上隐藏内容的类,但将其保持在代码空间中呈现。在这种情况下,我创建了一个 CSS 类,它将隐藏分配给它的 div 中的所有内容。这使得内容仍然可以被 Javascript 的选择器访问,但除非类被删除,否则不会出现。在 javascript 文件中,我真正要做的就是删除类并将其添加到元素中,就像您使用 display:none 一样。
如需进一步阅读,我建议阅读有关 css-tricks 的以下主题: 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>
推荐阅读
- javascript - 开玩笑地监视模块功能
- node.js - Node.js 等待相同函数完成两次的最佳实践
- chromecast - 投射访问受保护的媒体
- php - 遍历查询构建器实例,删除一些项目然后返回修改的实例
- javascript - 笑话:从使用 Material-UI 的组件中获取状态
- c# - C# 检查字符串数组中的特定字符串
- ios - 框架是在没有完整位码的情况下构建的 - 框架位码已启用
- c++ - 如何使用 C++ 删除 .txt 中的记录
- python - 无法使用python从json文件中打印项目
- oracle - ORA-00928 在第 1120 行的 dbms_sql 中缺少选择关键字 ora-06512 在第 84 行加载_csv