您好！很高兴为您答疑。
这个应该是extjs定义界面的代码，按照一般的思路，用回车键替代tab键进行激活切换，就是重写事件。但是因为回车键本身的特殊性，该方式未必可以奏效。如果这种事件重新定义的方式都无法实现，那应该就没法实现了。
如果对我们的回答存在任何疑问，欢迎继续问询。
<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea onkeypress="return handleEnter(this, event)">回车切换焦点</textarea>
</form>function handleEnter (field, event) {
var keyCode = eventkeyCode eventkeyCode : eventwhich eventwhich : eventcharCode;
if (keyCode == 13) {
var i;
for (i = 0; i < fieldformelementslength; i++)
if (field == fieldformelements[i])
break;
i = (i + 1) % fieldformelementslength;
fieldformelements[i]focus();
return false;
}
else
return true;
}
监听tab按键
$(document)on("keyup", function (e) {if (ekeyCode === 9)
$("select")val("你的值");
});
这里分享下js判断当前选中哪个是tab页的方法。
设备：联想电脑
系统：win7
软件：Visual Studio 2017
1、首先来看一下要实现的效果，如下图所示，顶上是tab页卡，下面是内容。
2、然后准备页面的内容，如下图所示，tab运用ul布局，内容运用div布局。
3、接下来就是去除页面中的一些默认间距以及ul的list-style样式，如下图所示。
4、然后定义tab页卡以及内容的相关样式，如下图所示。
5、接着导入所需要的jquery的压缩库文件，如下图所示，版本大家自己选择。
6、最后就是实现选择一个页卡，然后展现页卡内内容的方法，JS实现tab页卡主要是运用了mouseenter的事件方法进行控制显示。
代码如下：
<html><head>
<style type="text/css">
{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 12px;
padding-top: 0px;
}
BODY
{
padding-left: 20px;
padding-top: 20px;
}
wid240
{
width: 242px;
margin-bottom: 20px;
}
wid180
{
width: 182px;
}
tab
{
border-bottom: #000 1px solid;
border-left: #000 1px solid;
border-top: #000 1px solid;
border-right: #000 1px solid;
}
tab UL
{
zoom: 1;
clear: both;
}
tab UL:after
{
display: block;
height: 0px;
visibility: hidden;
clear: both;
content: "";
}
tab UL LI
{
text-align: center;
line-height: 26px;
width: 60px;
display: inline;
background: #000;
float: left;
height: 26px;
color: #fff;
}
tab UL LIon
{
background: #fff;
color: #000;
}
tabList
{
border-bottom: #000 1px solid;
border-left: #000 1px solid;
height: 150px;
border-top: #000 1px;
border-right: #000 1px solid;
}
tabList one
{
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
display: none;
color: #ff0000;
padding-top: 10px;
}
tabList block
{
display: block;
}
</style>
<script type="text/javascript">
function setTab(name,m,n){
for( var i=1;i<=n;i++){
var menu = documentgetElementById(name+i);
var showDiv = documentgetElementById("cont_"+name+"_"+i);
menuclassName = i==m "on":"";
showDivstyledisplay = i==m"block":"none";
}
}
</script>
<meta name="GENERATOR" content="MSHTML 800760016535">
</head>
<body>
<div class="wid240">
<div class="tab">
<ul>
<li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li>
<li id="one2" onmouseover='setTab("one",2,4)'>one2 </li>
<li id="one3" onmouseover='setTab("one",3,4)'>one3 </li>
<li id="one4" onmouseover='setTab("one",4,4)'>one4 </li>
</ul>
</div>
<div class="tabList">
<div id="cont_one_1" class="one block">
cont_one_1</div>
<div id="cont_one_2" class="one">
cont_one_2</div>
<div id="cont_one_3" class="one">
cont_one_3</div>
<div id="cont_one_4" class="one">
cont_one_4</div>
</div>
</div>
<div class="wid180">
<div class="tab">
<ul>
<li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li>
<li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li>
<li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li>
</ul>
</div>
<div class="tabList">
<div id="cont_tow_1" class="one block">
cont_tow_1</div>
<div id="cont_tow_2" class="one">
cont_tow_2</div>
<div id="cont_tow_3" class="one">
cont_tow_3</div>
</div>
</div>
</body>
</html>
直接复制到本地html页面运行就可以，望采纳，谢谢！
以上就是关于火狐浏览器中js怎么在下面的程序里用回车实现tab键的功能全部的内容，包括:火狐浏览器中js怎么在下面的程序里用回车实现tab键的功能、JS 回车键变成tab键改变焦点；Jquery也行、js如何通过tab键盘来切换下拉框的值呢等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）