作者xeriou (none)
看板Ajax
标题[ js ] .focus()切换问题
时间Fri Aug 23 09:35:37 2013
最近要写一个条码扫描输入介面
也知道条码器在扫描後会有ENTER传入电脑
於是我有五个输入点，网页载入时需要自动focus()在第一个
然後每按一次ENTER会focus到下一个
到第五个时会自动把表单传出
小弟使用jQuery v1.10.2
目前我的程式码如下
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('#fir').focus();
})
</script>
<style>
#form_submit {
display:none;
}
</style>
</head>
<body>
<form action="data.php" method="post">
<input id="fir" name="company" type="text" placeholder="厂商">
<input id="sec" name="barcode" placeholder="条码">
<input id="thr" name="color" placeholder="颜色">
<input id="fou" name="size" placeholder="尺寸">
<input id="fif" name="cost" placeholder="成本">
<input id="form_submit" type="submit" value="提交">
</form>
<script>
$('#fir').keydown(function(e){
if(e.which==13){
$('#sec').focus();
}
})
$('#sec').keydown(function(e){
if(e.which==13){
$('#thr').focus();
}
})
$('#thr').keydown(function(e){
if(e.which==13){
$('#fou').focus();
}
})
$('#fou').keydown(function(e){
if(e.which==13){
$('#fif').focus();
}
})
$('#fif').keydown(function(e){
if(e.which==13){
$('#fif').next('#form_submit').css('display','inline');
}
})
</script>
</body>
</html>
基本上，程式是可以运作&&符合需求
但是...程式码如此肥(input少)，如果input有几百个
那会很可怕，所以想说问有没有更好的写法...
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 211.22.161.199
※ 编辑: xeriou 来自: 211.22.161.199 (08/23 09:42)
1F：→ juriolegend:用attr 08/23 09:40
2F：→ akiratw:每个 keydown 事件内容都长得一样，写在一起就好了 08/23 09:52
4F：→ xeriou:感谢akiratw大...短短几行程式码让我更了解怎麽操作JS... 08/23 11:00
5F：→ xeriou:现在遇到问题，只要有那个button在，只要ENTER他就会送出 08/23 11:01
6F：→ xeriou:.preventDefault()似乎起不了作用~"~.... 08/23 11:02
7F：→ xeriou:可是你贴给我的又是对的，所以我索性就把button给砍了... 08/23 11:03
8F：→ xeriou:这样也可以送出...只是那问题还得再找... 08/23 11:03
9F：推 marsantony:return false试试? 08/25 07:44
10F：→ danny8376:bind form的submit 然後preventDefault(可以顺便做检查 09/04 06:11