javascript - HTML 从最后一个输入字段移动到第一个输入字段

标签 javascript html jquery input jquery-selectors

我有几个像这样的输入字段

<div class='kary rounded5' id='boarVariables'>
    <span class='bld'>BOAR variables</span><br>
    <div class='klbl'>Number of Boars Tested</div> 
    <input type='text' id='k_nobt'><br>
    <div class='klbl'>AVG sperm/boar/week (lifetime)</div> 
    <input type='text' id='k_asbw'><br>
    <div class='klbl'>Sperm per dose (bil)</div> 
    <input type='text' id='k_spdb'><br>
    <div class='klbl'>Utilization rate</div> 
    <input type='text' id='k_ur'>%<br>  
    <div class='klbl'>Boar productive lifetime (months)</div> 
    <input type='text' id='k_bplm'><br>     
    <hr>
    <div class='klbl'>Doses possible/week:</div>
    <div class='kanswer' id='k_dpw'></div><br>
    <div class='klbl'>Doses actual/week:</div>
    <div class='kanswer' id='k_daw'></div><br>      
    <div class='klbl'>Usable doses/lifetime:</div>
    <div class='kanswer' id='k_udl'></div><br>          
    <div class='klbl'>Sows served/lifetime:</div>
    <div class='kanswer' id='k_ssl'></div><br>      
</div>

我已经输入了像选项卡一样的工作方式,当他们按下输入键时,它会移动到下一个输入字段,并调用一个对输入进行计算的函数。

    $('#boarVariables input').keypress(function(e) {
        if (e.which == 13) {
            $(this).nextAll('input').first().focus(); 
            e.preventDefault();
        }
    });             
    $('#boarVariables input').blur(function(){
        calcBoarVars();
    });

当我到达最后一个输入字段时,我不知道如何移回第一个字段,这将通过模糊正确触发计算。

我尝试过这种变体(在捕获输入内部)但没有运气

$('#boarVariables input:last-child').each(function(){
    var $this = $(this);
    $('#boarVariables input:first').focus();
});

最佳答案

 $('#boarVariables input').keypress(function(e) {
        if (e.which == 13) {
            if(!!$(this).nextAll('input').first().length){
                $(this).nextAll('input').first().focus();
            }
            else{
               //I can't figure out how to move back to the first field : this is how
                $('#boarVariables input:first').focus();
            }
            e.preventDefault();
        }
    }); 
// which would trigger the calculation correctly via blur : it does.            
$('#boarVariables input').blur(function(){alert("ok");})

演示:http://jsfiddle.net/ZURze/

关于javascript - HTML 从最后一个输入字段移动到第一个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24021141/

相关文章:

javascript - node_modules/angular2-hotkeys/lib/hotkey.model.d.ts(24,9) : error TS1086: An accessor cannot be declared in an ambient context 中出现错误

jquery - 为什么::before 伪元素不能与 :visited 伪类一起使用?

jQuery 动画方法不停止

html - 无法将 div 置于另一个 div 的中心

javascript - 旋转木马图像相同高度

javascript - 返回函数内的对象

javascript - mouseenter 更改 anchor 内的 HTML 后 mouseleave 未触发

javascript - 是否可以阻止浏览器访问文本文件,但仍允许 JavaScript 访问?

javascript - 您如何写入 aws lambda 实例的文件系统?

html - 使组件添加新组件的问题