текстовые поля не отображаются по одному на вкладке с помощью jquery

Question

текстовые поля не отображаются по одному на вкладке с помощью jquery

0

Привет, я хочу показывать текстовые поля один за другим на вкладке.

Сначала мне нужно t отобразить 1 текстовое поле, а затем после нажатия вкладки 2-го текстового поля будет отображаться с фокусом. Then 3rd и 4th с таким же процессом.

Я могу отображать текстовые поля, но после 1-го текстового поля, когда я нажимаю вкладку вместо текстового поля, отображаются все текстовые поля.

Вот мой код:

     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>

neha 06 окт. 2013, в 15:32

Источник

0

Почему тег JQuery? Чистый JS здесь; и работает "отлично" здесь jsfiddle.net/IrvinDominin/LQEct
Irvin Dominin 06 окт. 2013, в 13:18
0

@IrvinDomininakaEdward вы правы. Этот тоже работает для меня ... но здесь упущения не хватает. Каждый раз, когда мы нажимаем Tab, следующее текстовое поле должно получить фокус.
neha 06 окт. 2013, в 13:21
0

Я копирую тот же ваш код, но он отображает 2 текстовых поля, когда я нажимаю вкладку на первом текстовом поле. И я вижу, что он отображается правильно в jsfiddle.
neha 06 окт. 2013, в 14:34
0

Это недавнее редактирование добавило несколько тегов; посмотрите, если у вас все еще есть проблема.
Dennis Meng 06 окт. 2013, в 17:09
0

@DennisMeng вы обновили мой код?
neha 06 окт. 2013, в 17:11
0

Я откатился до первоначального вида. Отсутствие закрывающих тегов может быть причиной этой проблемы, поэтому это изменение должно быть отклонено в первую очередь.
dev-null-dweller 06 окт. 2013, в 17:11
0

@neha я не сделал; Я пересматривал изменение (и собирался отклонить его), когда увидел, что оно все равно набрало достаточно голосов, чтобы быть одобренным.
Dennis Meng 06 окт. 2013, в 19:39

Показать ещё 5 комментариев

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Почему тег JQuery? Чистый JS здесь; и работает "отлично" здесь jsfiddle.net/IrvinDominin/LQEct
@IrvinDomininakaEdward вы правы. Этот тоже работает для меня ... но здесь упущения не хватает. Каждый раз, когда мы нажимаем Tab, следующее текстовое поле должно получить фокус.
Я копирую тот же ваш код, но он отображает 2 текстовых поля, когда я нажимаю вкладку на первом текстовом поле. И я вижу, что он отображается правильно в jsfiddle.
Это недавнее редактирование добавило несколько тегов; посмотрите, если у вас все еще есть проблема.
Я откатился до первоначального вида. Отсутствие закрывающих тегов может быть причиной этой проблемы, поэтому это изменение должно быть отклонено в первую очередь.
@neha я не сделал; Я пересматривал изменение (и собирался отклонить его), когда увидел, что оно все равно набрало достаточно голосов, чтобы быть одобренным.

Psych Half · Answer 1 · 2013-10-06T15-37-00.000Z

это может быть то, что вы ищете.. 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') ;
    });
    });

мне нужно добавить файл JS для этого?
да уж. вам нужен jQuery для этого ... кстати, это то, что вы хотели?