javascript - 自动聚焦列表项中的表单输入

Question

我有一个表单，输入位于列表项中，以便在用户输入信息时一次显示每个输入。我无法让自动对焦工作。当用户单击 Enter 时，当前输入滑出，下一个输入滑入，但光标不在字段中。

    <div class="page" id="page-contact">
            <div class="fs-form-wrap" id="fs-form-wrap">
                <form id="myform" class="fs-form fs-form-full" autocomplete="off">
                    <ol class="fs-fields">
                        <li>
                            <label class="fs-field-label fs-anim-upper" for="q1">What's your name?</label>
                            <input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Joe Web" required/>
                        </li>
                        <li>
                            <label class="fs-field-label fs-anim-upper" for="q2">What's your email address?</label>
                            <input class="fs-anim-lower" id="q2" name="q2" type="email" placeholder="jweb@dev.com" required/>
                        </li>
                        <li>
                            <label class="fs-field-label fs-anim-upper" for="q4">Leave me a note here</label>
                            <textarea class="fs-anim-lower" id="q4" name="q4" placeholder="Describe here"></textarea>
                        </li>
                    </ol><!-- /fs-fields -->
                    <button class="fs-submit button button--nuka" type="submit">Ready? submit</button> 

这个 js 不起作用，我不知道为什么

$(document).ready(function(){
            $('.fs-anim-upper').on('keypress', function(e) {
                if(e.which == 13) {
                    switch($(this).attr('id')){
                        case 'q2':
                        $('#q2').focus();
                        e.preventDefault();
                        break;
                        case 'q3':
                        $('#q3').focus();
                        e.preventDefault();
                        break;
                    }
                }
            });
        });

Answer 1

您的代码中有几个问题

问题:选择器错误

您现在拥有:

$('.fs-anim-upper').on('keypress', function(e) {

这些是 html 中的标签，而不是输入。将其更改为:

$('.fs-anim-lower').on('keypress', function(e) {

问题:很可能是错误的 id

 case 'q2': 
  $('#q2').focus();
  e.preventDefault();
  break;
 case 'q3':
  $('#q3').focus();
  e.preventDefault();
  break;

这意味着，当您按 Enter 键时，请将焦点集中在自己身上..我认为您想要:

case 'q1':
    $('#q2').focus();
    e.preventDefault();
    break;
case 'q2':
    $('#q4').focus(); // <--- Note that you have q4 in html, not q3
    e.preventDefault();
    break;

<小时/>

请参阅此处的工作 fiddle :http://jsfiddle.net/6mm6gc9a/7/