Jquery select NEXT text field on Enter Key Press

问题

I have made a page using jquery, and on load it selects the first text field automatically. I want it to then move to the next field when the ENTER key is pressed.

$('.barcodeField input').bind('keyup', function(event) {
    if(event.keyCode==13){
       $("this + input").focus();     
    }
});

I can't find anything that works on the net. And I've scoured the forums.

回答1:

I've created a little function which can do what you need. This is the version I use so you may need to change the class names but you should get the idea.

<script type="text/javascript">
$(document).ready(function(){
$(".vertical").keypress(function(event) {
        if(event.keyCode == 13) { 
        textboxes = $("input.vertical");
        debugger;
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1]
            nextBox.focus();
            nextBox.select();
            event.preventDefault();
            return false 
            }
        }
    });
})
</script>

So basically:-

Get all the input fields matching .vertical
Find which is the current text box
Find the next one
Set the focus on that one

回答2:

You should use:

$(this).next('input').focus();

回答3:

try this:

(function($){
    $.fn.enterNext = function(){
       var _i =0;
       $('input[type=text], select',this)
            .each(function(index){
            _i = index;
            $(this)
                .addClass('tab'+index)
                .keydown(function(event){
                    if(event.keyCode==13){
                        $('.tab'+(index+1)).focus();
                        event.preventDefault();
                    }
                });

        })
     $( "input[type=submit]",this ).addClass('tab'+(_i+1));
}})(jQuery);

for use:

$('form.element').enterNext();

in my case this is the best solution in that I got because the function .next() is strict with elements outside their branch DOM. The best way is to force an index.

and sorry for my bad English...

回答4:

Basically, you just need top have the DOM elements in some structure so that you can select the next one. I'd suggest exploiting tabindex, but anything that let's you have a defined order will work.

回答5:

Here is the solution I came up with. The issue I had was that I needed to maintain tabindex, i.e. it had to function exactly that same as hitting tab. It uses both underscore and jquery.

I've left in my debugging code:

try {
    var inputs = $("input[id^=tpVal-]");
    var sortedInputs = _.sortBy(inputs, function(element){
        var tabIndex = $(element).attr('tabindex');//debugging
        var id = $(element).attr('id');//debugging
        console.log(id +" | "+ tabIndex +" | "+ $(element));//debugging
        return parseInt($(element).attr('tabindex'));
    });
    $(sortedInputs).each(function (index, element) {
        $(element).keyup(function(event){
            if(event.keyCode==13) {
                var $thisElement = $(element);//debugging
                var nextIndex = index+1;//debugging
                var $nextElement = $(sortedInputs[nextIndex]);
                var thisId = $thisElement.attr('id');//debugging
                var nextId = $nextElement.attr('id');//debugging
                console.log("Advance from "+thisId+" to "+nextId);//debugging
                if($nextElement!=undefined) {
                    $(sortedInputs[index + 1]).focus();
                }
            }
        });
    });
} catch (e) {
    console.log(e);
}

回答6:

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <input id="122" class='TabOnEnter' tabindex="1" /><br>
        <input id="123" class='TabOnEnter' tabindex="2" /><br>

         <input type="text" name="abc" /><br>
          <input type="text" name="abc1" /><br>
           <input type="text" name="abc2" /><br>
           <input type="text" name="abc3" class='TabOnEnter' tabindex="3" /><br>

        <input  class='TabOnEnter' tabindex="4" /><br>
        <input  class='TabOnEnter' tabindex="5" /><br>
        <input  class='TabOnEnter' tabindex="6" /><br>
<!--        <textarea class='TabOnEnter' tabindex="6">Hi, I am a test area</textarea>-->
        <input type="submit" value="submit" class='TabOnEnter' tabindex="7">


         <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            $(document).on("keypress", ".TabOnEnter", function (e)
            {
                //Only do something when the user presses enter
                if (e.keyCode == 13)
                {
                    var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
                    console.log(this, nextElement);
                    if (nextElement.length)
                        nextElement.focus()
                    else
                        $('[tabindex="1"]').focus();
                }
            });

//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut();  })
        </script>
    </body>
</html>

来源：https://stackoverflow.com/questions/4649604/jquery-select-next-text-field-on-enter-key-press

标签

javascript

jquery

html

keyboard