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

debugcn 发表于 Dev

哈利·波特

我有一个表单，输入在列表项中，以便在用户输入信息时一次显示每个输入。我无法自动对焦工作。当用户单击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="[email protected]" 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;
                    }
                }
            });
        });

巴斯·范·斯坦

您的代码中有几个问题

问题：选择器错误

您现在有：

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

这些是labels您html中的而不是inputs。更改为：

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

问题：很可能是错误的 `id's`

 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;

看到这里工作的小提琴：http : //jsfiddle.net/6mm6gc9a/7/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。