javascript 将光标移动到下一个文本字段按Enter键

bbmckpt7 于 2022-12-28 发布在 Java

关注(0)|答案(6)|浏览(210)

我在我的表单中有多个文本字段，我希望当用户在一个文本字段中输入数据并按回车键时，光标移动到当前文本字段旁边的另一个文本字段。我访问了一些问题，但没有发现它们有用。

$("#username").keypress(function (event) {
    alert("inside function");
    if(event.keyCode == 13) { 
        textboxes = $("input.username");
        debugger;
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1];
            nextBox.focus();
            nextBox.select();
            event.preventDefault();
            return false; 
        }
    }
});

这是我的代码，我已经尝试了另一件事，当数据输入在最后一个文本字段，然后表格将提交鼠标点击按钮，而不是按回车键。

JavaScript

来源：https://stackoverflow.com/questions/22853696/move-cursor-to-next-text-field-pressing-enter

6条答案

按热度按时间

af7jpaap1#

这应该行得通：

$(".username").keyup(function (event) {
    if (event.keyCode == 13) {
        textboxes = $("input.username");
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1];
            nextBox.focus();
            nextBox.select();
        }
        event.preventDefault();
        return false;
    }
});

回车不会在所有浏览器中触发keypress，而是使用了keyup。还将eventlistener附加到每个input，而不是 Package 器。
A live demo at jsFiddle.
您的事件委托代码也将在稍有更改的情况下工作：

currentBoxNumber = textboxes.index(event.target);

上面句子中的this将指 Package 器而不是input，event.target指激发事件的实际元素。
A live demo at jsFiddle.

赞(0）回复(0）举报 2022-12-28

gmxoilav2#

试试这个，只要你按下它将移动到下一个输入字段的形式，当它到达提交按钮，它将提交的形式

<html>
     <head>
       <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type='text/javascript'>
        $(document).ready(function(){
            $('#myForm input').keydown(function(e){
             if(e.keyCode==13){       

                if($(':input:eq(' + ($(':input').index(this) + 1) + ')').attr('type')=='submit'){// check for submit button and submit form on enter press
                 return true;
                }

                $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();

               return false;
             }

            });
        });
        </script>
     </head>
     <body>
      <form action="" id="myForm"  >
        <input type='text'  name='firstField'>
            <input type='text' name='secondField'>

            <input type='text' name='secondField'>

            <input type='text' name='secondField'>
        <input type='submit'>
      </form>
     </body>
    </html>

赞(0）回复(0）举报 2022-12-28

cfh9epnr3#

$("input").keypress(function(e) {
  if (e.which == 13) {
    var index = $("input[type='text']").index(this);
    $("input[type='text']").eq(index + 1).focus();
    e.preventDefault();
  }
});

它非常适合我，支持几乎所有的jquery版本！

赞(0）回复(0）举报 2022-12-28

arknldoa4#

$(document).ready(function () {

    $('input:text:first').focus();

    $('#txtLoginID').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtLoginID').val() == "") {
                return false;
            }
            else {
                $('#txtPassword').focus();

            }
        }
    });

    $('#txtPassword').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtPassword').val() == "") {
                return false;
            }
            else {
                $('#txtFirstName').focus();

            }
        }
    });

    $('#txtFirstName').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtFirstName').val() == "") {
                return false;
            }
            else {
                $('#txtLastName').focus();

            }
        }
    });

    $('#txtLastName').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtLastName').val() == "") {
                return false;
            }
            else {
                $('#txtPhoneNo').focus();

            }
        }
    });

    $('#txtPhoneNo').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtPhoneNo').val() == "") {
                return false;
            }
            else {
                $('#txtEmailID').focus();

            }
        }
    });

    $('#txtEmailID').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtEmailID').val() == "") {
                return false;
            }
            else {
                $('#txtAddress').focus();

            }
        }
    });

    $('#txtAddress').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtAddress').val() == "") {
                return false;
            }
            else {
                $('#btnSignUp').focus();

            }
        }
    });

you can do for text ,password,textarea its a long process but no confusion

赞(0）回复(0）举报 2022-12-28

icnyk63a5#

**This code was perfectly worked in  cursor move to next contenteditable td and textboxes and dropdown list within td ,and datepicker within textbox by reference in class strong text**

    `var $input = $('.EnterlikeTab');
        $input.bind('keydown', function (e) {
            if (e.which == 13) {
                e.preventDefault();
                var nxtIdex = $input.index(this) + 1;
                $(".EnterlikeTab:eq(" + nxtIdex + ")").focus();
            }
        });`

赞(0）回复(0）举报 2022-12-28

7gs2gvoe6#

<div class="container">
    <h2>On Enter Button Click, focus next Input Field</h2>
    <form onsubmit="event.preventDefault()" name="f">
        <div class="form-group ">
            <label for="name ">Name:</label> <input type="text "
                class="form-control register_form" name="name"
                placeholder="Enter Name ">
        </div>
        <div class="form-group ">
            <label for="phone ">Phone:</label> <input type="text "
                class="form-control register_form" name="phone"
                placeholder="Enter Phone ">
        </div>
        <div class="form-group ">
            <label for="email ">Email:</label> <input type="email "
                class="form-control register_form " name="email"
                placeholder="Enter email ">
        </div>
        <div class="form-group ">
            <label for="pwd ">Password:</label> <input type="password "
                class="form-control register_form " name="pwd"
                placeholder="Enter password ">
        </div>
        <div class="form-group">
            <input type="submit " value="submit"
                class="btn btn-default form-control register_form ">
        </div>
    </form>
</div>


<script>
    var allFields = document.querySelectorAll(".register_form");
    console.log(allFields)

    let count = 0;

    for (var i = 0; i < allFields.length; i++) {
        console.log(i)
        allFields[i].addEventListener("keyup", function(event) {

            if (event.keyCode === 13) {
                console.log('Enter clicked')

                console.log(count)
                // event.preventDefault();
                var n = f.name.value;

                var n1 = m12(count);
                if (this.parentElement.nextElementSibling
                        .querySelector('input')
                        && n1) {
                    count = count + 1;
                    this.parentElement.nextElementSibling.querySelector(
                            'input').focus();
                }
            }
        });

    }

    function m12(m4) {
        console.log(m4 + "baluu")
        console.log(m4 + 1)
        var n79 = document.getElementsByTagName('input')[m4].value;
        console.log(n79 + "annnnana")
        var n = f.name.value;
        var m5 = f.phone.value;
        var m6 = f.email.value;
        var m7 = f.pwd.value;

        if (m4 == 0) {
            if (!(/^[a-z]{6}$/.test(n79))) {
                alert("name should contaon 6 letter")
                return false
            } else {
                return true
            }

        } else if (m4 == 1) {
            if (!(/^[0-9]{6}$/.test(n79))) {
                alert("email should contaon 6 letter")
                return false
            } else {
                return true
            }

        } else if (m4 == 2) {

            if (m6.length == 0) {
                return false
            } else {
                return true
            }

        } else if (m4 == 3) {
            if (m7.length == 0) {
                return false
            } else {
                return true
            }

        }

    }
</script>

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 将光标移动到下一个文本字段按Enter键

6条答案

相关问题

热门标签

最新问答