Question

您好我想在标签页上逐一显示文本框。

首先我需要显示1个文本框然后按下选项卡后第二个文本框将显示焦点。然后第3个和第4个相同的过程。

我可以显示文本框但是在第一个文本框之后，当我按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') ;
    });
    });

使用jquery在tabclick上逐个显示文本框

1 个答案: