textboxes不是一個一個地顯示在tabclick上使用jquery

Question

嗨，我想顯示文本框一個接一個按Tab鍵。

首先，我需要顯示1個文本框，然後按下標籤第二個文本框將顯示焦點。然後第三和第四個相同的過程。

我能夠顯示文本框，但第一個文本框後，當我按Tab而不是文本框，所有文本框顯示。

這裏是我的代碼：

 function showstep2() { 

     document.getElementById('step2').style.visibility = 'visible' 
     document.getElementById('newOrdQuan').focus(); 


    } 


    function showstep3() { 

     document.getElementById('step3').style.visibility = 'visible'; 
     document.getElementById('takeOutAmt').focus(); 
    } 
    function showstep4() { 
     document.getElementById('step4').style.visibility = 'visible'; 
     document.getElementById('compsPerWeek').focus(); 
    } 




<table style="width: 270px; border: 2px navy solid;"> 
<tbody> 
<tr> 
<td><form name="form1"> 
<table style="width: 100%;" align="left"> 
<tbody> 
<tr> 
<td>How many TakeOut Orders do You do each week?</td> 
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td> 
</tr> 
</tbody> 
</table> 

<table id="step2" style="width: 100%; visibility: hidden;" align="left"> 
<tbody> 
<tr> 
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td> 
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td> 
</tr> 
</tbody> 
</table> 
<table id="step3" style="width: 100%; visibility: hidden;" align="left"> 
<tbody> 
<tr> 
<td>How Much Is Your Average Takeout Order?</td> 
<td> 
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td> 
</tr> 

</tbody> 
</table> 

<table id="step4" style="width: 100%; visibility: hidden;" align="left"> 
<tbody> 
<tr> 
<td>How Many Times a Week do You Comp an Order? (5% expected)</td> 
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep5();" /></td> 
</tr> 
</tbody> 
</table> 

Answer 1

，這可能是你在找什麼.. http://jsbin.com/oBeritE/1

這裏的代碼..刪除的onblur = 「」 腳本.. jQuery的可以處理事件。 。

// the next step to be shown 
    var nextStep = 2 ; 
// first 2 blank to equal with nextStep.. 
    var focusArr = ['', '' ,'newOrdQuan' , 'takeOutAmt', 'compsPerWeek','avgProfitPerOrder']; 
// put your do functions inside the function() {} .. 
    var doFuncs = { 
    do1 : function() { 
    //alert('function 1') ; 
    } , 

    do2 : function() { 
    //alert('put function 2 '); 
    }, 

    do3 : function() { 
    //alert('function 3 here') ; 
    }, 

    do4 : function() { 
    //alert('function 4 here') ; 
    } 


    }; 

    // storing functions in array.. 
// first two zeros to equal with nextStep.. 
    var doArr= [0,0] ; 
    var i = 2 ; 
    for(var d in doFuncs) { 
    doArr[i] = d ; i++ ; 
    } 

    // simple function to show steps.. 
    function showStep(index) { 
    $('#step' + index).css('visibility','visible'); 
// focus next textbox .. 
    $('#' + focusArr[index]).focus() ; 
// the apporipriate function will be called... 
    doFuncs[doArr[index]]() ; 
    } 


    $(document).ready(function() { 
// put focus on first 
    $('#prevOrdQuan').focus(); 
// check for keypress 
    $('body').bind('keyup', 
    function(e){ 
// all you need is tab, right? so we call showStep whenever it is pressed.. 
    if(e.keyCode === 9) { 
    showStep(nextStep) ; 
    nextStep++ ; } 
// remove checking for keypress after all steps have finished 
    if(nextStep > 6) $('body').unbind('keyup') ; 
    }); 
    });