堆栈内存溢出
  简体   繁体   English

Enter 按键的行为类似于 Javascript 中的 Tab

[英]Enter key press behaves like a Tab in Javascript

 原文  2009-06-17 22:21:39  0   23    javascript/ html/ cross-browser/ dom-events

问题描述

I'm looking to create a form where pressing the enter key causes focus to go to the "next" form element on the page.我正在寻找创建一个表单，在该表单中按下回车键会使焦点转到 go 到页面上的“下一个”表单元素。 The solution I keep finding on the web is...我一直在 web 上找到的解决方案是......

 <body onkeydown="if(event.keyCode==13){event.keyCode=9; return event.keyCode}">

Unfortunately, that only seems to work in IE.不幸的是，这似乎只适用于 IE。 So the real meat of this question is if anybody knows of a solution that works for FF and Chrome?所以这个问题的实质是，是否有人知道适用于 FF 和 Chrome 的解决方案？ Additionally, I'd rather not have to add onkeydown events to the form elements themselves, but if that's the only way, it will have to do.此外，我宁愿不必将onkeydown事件添加到表单元素本身，但如果这是唯一的方法，那么它就必须这样做。

This issue is similar to question 905222 , but deserving of it's own question in my opinion.这个问题与问题 905222类似，但在我看来值得单独提问。

Edit: also, I've seen people bring up the issue that this isn't good style, as it diverges from form behavior that users are used to.编辑：另外，我看到人们提出这样的问题，即这不是好的风格，因为它与用户习惯的表单行为不同。 I agree: It's a client request :(我同意：这是客户要求:(

23 个解决方案

解决方案1
 96 已采纳  2012-08-26 13:24:36

I used the logic suggested by Andrew which is very effective.我使用了安德鲁建议的逻辑，这非常有效。 And this is my version:这是我的版本：

$('body').on('keydown', 'input, select', function(e) {
    if (e.key === "Enter") {
        var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

KeyboardEvent's keycode (ie: e.keycode ) depreciation notice:- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode KeyboardEvent 的键码（即： e.keycode ）折旧通知：- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

解决方案2
 28  2016-12-30 08:20:01

The simplest vanilla JS snippet I came up with:我想出的最简单的 vanilla JS 片段：

document.addEventListener('keydown', function (event) {
  if (event.keyCode === 13 && event.target.nodeName === 'INPUT') {
    var form = event.target.form;
    var index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    event.preventDefault();
  }
});

Works in IE 9+ and modern browsers.适用于 IE 9+ 和现代浏览器。

解决方案3
 18  2014-12-18 11:21:33

Map [Enter] key to work like the [Tab] key Map [Enter] 键像 [Tab] 键一样工作

I've rewritten Andre Van Zuydam 's answer, which didn't work for me, in jQuery. This caputures both Enter and Shift + Enter .我在 jQuery 中重写了 Andre Van Zuydam的答案，这对我不起作用。这同时捕获了Enter和Shift + Enter 。 Enter tabs forward, and Shift + Enter tabs back.向前输入制表符，然后按Shift + Enter向后输入制表符。

I've also rewritten the way self is initialized by the current item in focus.我还重写了self由当前焦点项目初始化的方式。 The form is also selected that way.表格也是这样选择的。 Here's the code:这是代码：

// Map [Enter] key to work like the [Tab] key
// Daniel P. Clark 2014

// Catch the keydown for the entire document
$(document).keydown(function(e) {

  // Set self as the current item in focus
  var self = $(':focus'),
      // Set the form by the current item in focus
      form = self.parents('form:eq(0)'),
      focusable;

  // Array of Indexable/Tab-able items
  focusable = form.find('input,a,select,button,textarea,div[contenteditable=true]').filter(':visible');

  function enterKey(){
    if (e.which === 13 && !self.is('textarea,div[contenteditable=true]')) { // [Enter] key

      // If not a regular hyperlink/button/textarea
      if ($.inArray(self, focusable) && (!self.is('a,button'))){
        // Then prevent the default [Enter] key behaviour from submitting the form
        e.preventDefault();
      } // Otherwise follow the link/button as by design, or put new line in textarea

      // Focus on the next item (either previous or next depending on shift)
      focusable.eq(focusable.index(self) + (e.shiftKey ? -1 : 1)).focus();

      return false;
    }
  }
  // We need to capture the [Shift] key and check the [Enter] key either way.
  if (e.shiftKey) { enterKey() } else { enterKey() }
});

The reason textarea textarea的原因

is included is because we " do " want to tab into it.被包括在内是因为我们“确实”想要进入它。 Also, once in, we don't want to stop the default behavior of Enter from putting in a new line.此外，一旦进入，我们不想阻止Enter的默认行为放入新行。

The reason a and button原因a和button

allow the default action, " and " still focus on the next item, is because they don't always load another page.允许默认操作，“和”仍然关注下一个项目，因为它们并不总是加载另一个页面。 There can be a trigger/effect on those such as an accordion or tabbed content.可以对手风琴或选项卡式内容等内容产生触发/效果。 So once you trigger the default behavior, and the page does its special effect, you still want to go to the next item since your trigger may have well introduced it.因此，一旦您触发了默认行为，并且页面产生了特殊效果，您仍然希望 go 到下一个项目，因为您的触发器可能已经很好地引入了它。

解决方案4
 12  2013-11-20 14:50:18

Thank you for the good script.谢谢你的好剧本。

I have just added the shift event on the above function to go back between elements, I thought someone may need this.我刚刚在上面的 function 到 go 元素之间添加了 shift 事件，我想有人可能需要这个。

$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this)
  , form = self.parents('form:eq(0)')
  , focusable
  , next
  , prev
  ;

if (e.shiftKey) {
 if (e.keyCode == 13) {
     focusable =   form.find('input,a,select,button,textarea').filter(':visible');
     prev = focusable.eq(focusable.index(this)-1); 

     if (prev.length) {
        prev.focus();
     } else {
        form.submit();
    }
  }
}
  else
if (e.keyCode == 13) {
    focusable = form.find('input,a,select,button,textarea').filter(':visible');
    next = focusable.eq(focusable.index(this)+1);
    if (next.length) {
        next.focus();
    } else {
        form.submit();
    }
    return false;
}
});

解决方案5
 11  2016-10-20 05:59:27

This worked for me:这对我有用：

$(document).on('keydown', ':tabbable', function(e) {

    if (e.key === "Enter") {
        e.preventDefault();

        var $canfocus = $(':tabbable:visible');
        var index = $canfocus.index(document.activeElement) + 1;

        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }

});

解决方案6
 6  2014-11-12 19:48:18

There are problems with all of the implementations given here.这里给出的所有实现都存在问题。 Some don't work properly with textareas and submit buttons, most don't allow you to use shift to go backwards, none of them use tabindexes if you have them, and none of them wrap around from the last to the first or the first to the last.有些不能正常使用文本区域和提交按钮，大多数不允许您向后使用 shift to go，如果您有它们，它们都不使用 tabindexes，并且它们都不会从最后一个到第一个或第一个环绕到最后。

To have the [enter] key act like the [tab] key but still work properly with text areas and submit buttons use the following code.要使 [enter] 键像 [tab] 键一样工作，但仍能正确处理文本区域和提交按钮，请使用以下代码。 In addition this code allows you to use the shift key to go backwards and the tabbing wraps around front to back and back to front.此外，此代码允许您向后使用 go 的 shift 键，并且制表符从前到后和从后到前环绕。

Source code: https://github.com/mikbe/SaneEnterKey源码： https://github.com/mikbe/SaneEnterKey

CoffeeScript CoffeeScript

mbsd_sane_enter_key = ->
  input_types = "input, select, button, textarea"
  $("body").on "keydown", input_types, (e) ->
    enter_key = 13
    tab_key = 9

    if e.keyCode in [tab_key, enter_key]
      self = $(this)

      # some controls should just press enter when pressing enter
      if e.keyCode == enter_key and (self.prop('type') in ["submit", "textarea"])
        return true

      form = self.parents('form:eq(0)')

      # Sort by tab indexes if they exist
      tab_index = parseInt(self.attr('tabindex'))
      if tab_index
        input_array = form.find("[tabindex]").filter(':visible').sort((a,b) -> 
          parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'))
        )
      else
        input_array = form.find(input_types).filter(':visible')

      # reverse the direction if using shift
      move_direction = if e.shiftKey then -1 else 1
      new_index = input_array.index(this) + move_direction

      # wrap around the controls
      if new_index == input_array.length
        new_index = 0
      else if new_index == -1
        new_index = input_array.length - 1

      move_to = input_array.eq(new_index)
      move_to.focus()
      move_to.select()

      false

$(window).on 'ready page:load', ->
  mbsd_sane_enter_key()

JavaScript JavaScript

var mbsd_sane_enter_key = function() {
  var input_types;
  input_types = "input, select, button, textarea";

  return $("body").on("keydown", input_types, function(e) {
    var enter_key, form, input_array, move_direction, move_to, new_index, self, tab_index, tab_key;
    enter_key = 13;
    tab_key = 9;

    if (e.keyCode === tab_key || e.keyCode === enter_key) {
      self = $(this);

      // some controls should react as designed when pressing enter
      if (e.keyCode === enter_key && (self.prop('type') === "submit" || self.prop('type') === "textarea")) {
        return true;
      }

      form = self.parents('form:eq(0)');

      // Sort by tab indexes if they exist
      tab_index = parseInt(self.attr('tabindex'));
      if (tab_index) {
        input_array = form.find("[tabindex]").filter(':visible').sort(function(a, b) {
          return parseInt($(a).attr('tabindex')) - parseInt($(b).attr('tabindex'));
        });
      } else {
        input_array = form.find(input_types).filter(':visible');
      }

      // reverse the direction if using shift
      move_direction = e.shiftKey ? -1 : 1;
      new_index = input_array.index(this) + move_direction;

      // wrap around the controls
      if (new_index === input_array.length) {
        new_index = 0;
      } else if (new_index === -1) {
        new_index = input_array.length - 1;
      }

      move_to = input_array.eq(new_index);
      move_to.focus();
      move_to.select();
      return false;
    }
  });
};

$(window).on('ready page:load', function() {
  mbsd_sane_enter_key();
}

解决方案7
 4  2013-04-11 22:56:04

I reworked the OPs solution into a Knockout binding and thought I'd share it.我将 OPs 解决方案重新设计为 Knockout 绑定，并认为我会分享它。 Thanks very much:-)非常感谢：-）

Here's a Fiddle这是一个小提琴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript"></script>


</head>
<body>

    <div data-bind="nextFieldOnEnter:true">
        <input type="text" />
        <input type="text" />
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <input type="text" />
        <input type="text" />
    </div>


    <script type="text/javascript">
    ko.bindingHandlers.nextFieldOnEnter = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            $(element).on('keydown', 'input, select', function (e) {
                var self = $(this)
                , form = $(element)
                  , focusable
                  , next
                ;
                if (e.keyCode == 13) {
                    focusable = form.find('input,a,select,button,textarea').filter(':visible');
                    var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                    next = focusable.eq(nextIndex);
                    next.focus();
                    return false;
                }
            });
        }
    };

    ko.applyBindings({});
    </script>
</body>
</html>

解决方案8
 4  2010-10-04 16:17:56

Changing this behaviour actually creates a far better user experience than the default behaviour implemented natively.改变这种行为实际上创造了比本机实现的默认行为更好的用户体验。 Consider that the behaviour of the enter key is already inconsistent from the user's point of view, because in a single line input, enter tends to submit a form, while in a multi-line textarea, it simply adds a newline to the contents of the field.考虑到 enter 键的行为从用户的角度来看已经不一致了，因为在单行输入中，enter 倾向于提交一个表单，而在多行 textarea 中，它只是简单地在内容中添加一个换行符场地。

I recently did it like this (uses jQuery):我最近是这样做的（使用 jQuery）：

$('input.enterastab, select.enterastab, textarea.enterastab').live('keydown', function(e) {
 if (e.keyCode==13) {
  var focusable = $('input,a,select,button,textarea').filter(':visible');
  focusable.eq(focusable.index(this)+1).focus();
  return false;
 }
});

This is not terribly efficient, but works well enough and is reliable - just add the 'enterastab' class to any input element that should behave in this way.这不是非常有效，但工作得很好并且可靠 - 只需将 'enterastab' class 添加到任何应该以这种方式运行的输入元素。

解决方案9
 2  2014-01-21 21:05:07

Here is an angular.js directive to make enter go to the next field using the other answers as inspiration.这是一个 angular.js 指令，使用其他答案作为灵感，使输入 go 到下一个字段。 There is some, perhaps, odd looking code here because I only use the jQlite packaged with angular. I believe most of the features here work in all browsers > IE8.这里可能有一些看起来很奇怪的代码，因为我只使用与 angular 一起打包的 jQlite。我相信这里的大部分功能都适用于所有浏览器 > IE8。

angular.module('myapp', [])
.directive('pdkNextInputOnEnter', function() {
    var includeTags = ['INPUT', 'SELECT'];

    function link(scope, element, attrs) {
        element.on('keydown', function (e) {
            // Go to next form element on enter and only for included tags
            if (e.keyCode == 13 && includeTags.indexOf(e.target.tagName) != -1) {
                // Find all form elements that can receive focus
                var focusable = element[0].querySelectorAll('input,select,button,textarea');

                // Get the index of the currently focused element
                var currentIndex = Array.prototype.indexOf.call(focusable, e.target)

                // Find the next items in the list
                var nextIndex = currentIndex == focusable.length - 1 ? 0 : currentIndex + 1;

                // Focus the next element
                if(nextIndex >= 0 && nextIndex < focusable.length)
                    focusable[nextIndex].focus();

                return false;
            }
        });
    }

    return {
        restrict: 'A',
        link: link
    };
});

Here's how I use it in the app I'm working on, by just adding the pdk-next-input-on-enter directive on an element.这是我在我正在开发的应用程序中使用它的方法，只需在元素上添加pdk-next-input-on-enter指令。 I am using a barcode scanner to enter data into fields, the default function of the scanner is to emulate a keayboard, injecting an enter key after typing the data of the scanned barcode.我正在使用条形码扫描仪将数据输入字段，扫描仪的默认 function 是模拟键盘，在输入扫描条形码的数据后注入回车键。

There is one side-effect to this code (a positive one for my use-case), if it moves focus onto a button, the enter keyup event will cause the button's action to be activated.这段代码有一个副作用（对我的用例来说是一个积极的副作用），如果它把焦点移到一个按钮上，enter keyup 事件将导致按钮的动作被激活。 This worked really well for my flow as the last form element in my markup is a button that I want activated once all the fields have been "tabbed" through by scanning barcodes.这对我的流程非常有效，因为我标记中的最后一个表单元素是一个按钮，我希望在通过扫描条形码“标记”所有字段后激活该按钮。

<!DOCTYPE html>
<html ng-app=myapp>
  <head>
      <script src="angular.min.js"></script>
      <script src="controller.js"></script>
  </head>
  <body ng-controller="LabelPrintingController">
      <div class='.container' pdk-next-input-on-enter>
          <select ng-options="p for p in partNumbers" ng-model="selectedPart" ng-change="selectedPartChanged()"></select>
          <h2>{{labelDocument.SerialNumber}}</h2>
          <div ng-show="labelDocument.ComponentSerials">
              <b>Component Serials</b>
              <ul>
                  <li ng-repeat="serial in labelDocument.ComponentSerials">
                      {{serial.name}}<br/>
                      <input type="text" ng-model="serial.value" />
                  </li>
              </ul>
          </div>
          <button ng-click="printLabel()">Print</button>
      </div>
  </body>
</html>

解决方案10
 1  2017-04-26 20:32:17

Try this...试试这个...

$(document).ready(function () {
    $.fn.enterkeytab = function () {
        $(this).on('keydown', 'input,select,text,button', function (e) {
            var self = $(this)
              , form = self.parents('form:eq(0)')
              , focusable
              , next
            ;
            if (e.keyCode == 13) {
                focusable = form.find('input,a,select').filter(':visible');
                next = focusable.eq(focusable.index(this) + 1);
                if (next.length) {
                    //if disable try get next 10 fields
                    if (next.is(":disabled")){
                        for(i=2;i<10;i++){
                            next = focusable.eq(focusable.index(this) + i);
                            if (!next.is(":disabled"))
                                break;
                        }
                    }
                    next.focus();
                }
                return false;
            }
        });
    }
    $("form").enterkeytab();
});

解决方案11
 1  2021-01-11 13:18:52

function return2tab (div)
{
    document.addEventListener('keydown', function (ev) {
        if (ev.key === "Enter" && ev.target.nodeName === 'INPUT') {

            var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';

            let ol= div.querySelectorAll(focusableElementsString);

            for (let i=0; i<ol.length; i++) {
                if (ol[i] === ev.target) {
                    let o= i<ol.length-1? ol[i+1]: o[0];
                    o.focus(); break;
                }
            }
            ev.preventDefault();
        }
    });
}

解决方案12
 1  2012-02-17 12:15:23

I've had a similar problem, where I wanted to press + on the numpad to tab to the next field.我遇到了类似的问题，我想在小键盘上按+以切换到下一个字段。 Now I've released a library that I think will help you.现在，我发布了一个我认为会对您有所帮助的库。

PlusAsTab : A jQuery plugin to use the numpad plus key as a tab key equivalent. PlusAsTab ：一个 jQuery 插件，用于将小键盘加号键用作等效的制表键。

Since you want enter / ↵ instead, you can set the options.由于您想要输入/ ↵ ，您可以设置选项。 Find out which key you want to use with the jQuery event.which demo .通过jQuery event.which demo找出您想使用的密钥。

JoelPurra.PlusAsTab.setOptions({
  // Use enter instead of plus
  // Number 13 found through demo at
  // https://api.jquery.com/event.which/
  key: 13
});

// Matches all inputs with name "a[]" (needs some character escaping)
$('input[name=a\\[\\]]').plusAsTab();

You can try it out yourself in the PlusAsTab enter as tab demo .您可以在PlusAsTab enter as tab demo中自己尝试一下。

解决方案13
 0  2009-06-18 09:26:24

If you can I would reconsider doing this: the default action of pressing <Enter> while in a form submits the form and anything you do to change this default action / expected behaviour could cause some usability issues with the site.如果可以的话，我会重新考虑这样做：在表单中按<Enter>的默认操作会提交表单，而您为更改此默认操作/预期行为所做的任何操作都可能导致网站出现一些可用性问题。

解决方案14
 0  2013-03-17 12:57:54

I have it working in only JavaScript. Firefox won't let you update the keyCode, so all you can do is trap keyCode 13 and force it to focus on the next element by tabIndex as if keyCode 9 was pressed.我让它只在 JavaScript 中工作。Firefox 不会让你更新 keyCode，所以你所能做的就是捕获 keyCode 13 并强制它通过 tabIndex 关注下一个元素，就像按下 keyCode 9 一样。 The tricky part is finding the next tabIndex.棘手的部分是找到下一个 tabIndex。 I have tested this only on IE8-IE10 and Firefox and it works:我只在 IE8-IE10 和 Firefox 上测试过它并且它有效：

function ModifyEnterKeyPressAsTab(event)
{
    var caller;
    var key;
    if (window.event)
    {
        caller = window.event.srcElement; //Get the event caller in IE.
        key = window.event.keyCode; //Get the keycode in IE.
    }
    else
    {
        caller = event.target; //Get the event caller in Firefox.
        key = event.which; //Get the keycode in Firefox.
    }
    if (key == 13) //Enter key was pressed.
    {
        cTab = caller.tabIndex; //caller tabIndex.
        maxTab = 0; //highest tabIndex (start at 0 to change)
        minTab = cTab; //lowest tabIndex (this may change, but start at caller)
        allById = document.getElementsByTagName("input"); //Get input elements.
        allByIndex = []; //Storage for elements by index.
        c = 0; //index of the caller in allByIndex (start at 0 to change)
        i = 0; //generic indexer for allByIndex;
        for (id in allById) //Loop through all the input elements by id.
        {
            allByIndex[i] = allById[id]; //Set allByIndex.
            tab = allByIndex[i].tabIndex;
            if (caller == allByIndex[i])
                c = i; //Get the index of the caller.
            if (tab > maxTab)
                maxTab = tab; //Get the highest tabIndex on the page.
            if (tab < minTab && tab >= 0)
                minTab = tab; //Get the lowest positive tabIndex on the page.
            i++;
        }
        //Loop through tab indexes from caller to highest.
        for (tab = cTab; tab <= maxTab; tab++)
        {
            //Look for this tabIndex from the caller to the end of page.
            for (i = c + 1; i < allByIndex.length; i++)
            {
                if (allByIndex[i].tabIndex == tab)
                {
                    allByIndex[i].focus(); //Move to that element and stop.
                    return;
                }
            }
            //Look for the next tabIndex from the start of page to the caller.
            for (i = 0; i < c; i++)
            {
                if (allByIndex[i].tabIndex == tab + 1)
                {
                    allByIndex[i].focus(); //Move to that element and stop.
                    return;
                }
            }
            //Continue searching from the caller for the next tabIndex.
        }

        //The caller was the last element with the highest tabIndex,
        //so find the first element with the lowest tabIndex.
        for (i = 0; i < allByIndex.length; i++)
        {
            if (allByIndex[i].tabIndex == minTab)
            {
                allByIndex[i].focus(); //Move to that element and stop.
                return;
            }
        }
    }
}

To use this code, add it to your html input tag:要使用此代码，请将其添加到您的 html 输入标签中：

<input id="SomeID" onkeydown="ModifyEnterKeyPressAsTab(event);" ... >

Or add it to an element in javascript:或者将它添加到 javascript 中的一个元素中：

document.getElementById("SomeID").onKeyDown = ModifyEnterKeyPressAsTab;

A couple other notes:其他一些注意事项：

I only needed it to work on my input elements, but you could extend it to other document elements if you need to.我只需要它来处理我的输入元素，但如果需要，您可以将它扩展到其他文档元素。 For this, getElementsByClassName is very helpful, but that is a whole other topic.为此，getElementsByClassName 非常有帮助，但那是另一个话题。

A limitation is that it only tabs between the elements that you have added to your allById array.一个限制是它只在您添加到 allById 数组的元素之间制表。 It does not tab around to the other things that your browser might, like toolbars and menus outside your html document.它不会切换到浏览器可能出现的其他内容，例如 html 文档之外的工具栏和菜单。 Perhaps this is a feature instead of a limitation.也许这是一个功能而不是限制。 If you like, trap keyCode 9 and this behavior will work with the tab key too.如果您愿意，可以捕获 keyCode 9，此行为也适用于 Tab 键。

解决方案15
 0  2013-07-31 15:34:56

You can use my code below, tested in Mozilla, IE, and Chrome您可以使用我在 Mozilla、IE 和 Chrome 中测试过的代码

   // Use to act like tab using enter key
    $.fn.enterkeytab=function(){
         $(this).on('keydown', 'input, select,', function(e) {
        var self = $(this)
          , form = self.parents('form:eq(0)')
          , focusable
          , next
          ;
            if (e.keyCode == 13) {
                focusable = form.find('input,a,select,button').filter(':visible');
                next = focusable.eq(focusable.index(this)+1);
                if (next.length) {
                    next.focus();
                } else {
                    alert("wd");
                    //form.submit();
                }
                return false;
            }
        });

    }

How to Use?如何使用？

$("#form").enterkeytab(); $("#form").enterkeytab(); // enter key tab // 输入关键选项卡

解决方案16
 0  2017-02-16 08:21:51

Vanilla js with support for Shift + Enter and ability to choose which HTML tags are focusable. Vanilla js 支持 Shift + Enter 并能够选择可聚焦的 HTML 标签。 Should work IE9+.应该工作 IE9 +。

  onKeyUp(e) {
    switch (e.keyCode) {
      case 13: //Enter
        var focusableElements = document.querySelectorAll('input, button')
        var index = Array.prototype.indexOf.call(focusableElements, document.activeElement)
        if(e.shiftKey)
          focus(focusableElements, index - 1)
        else
          focus(focusableElements, index + 1)

        e.preventDefault()
        break;
    }
    function focus(elements, index) {
      if(elements[index])
        elements[index].focus()
    }
  }

解决方案17
 0  2019-05-06 09:33:34

Many answers here uses e.keyCode and e.which that are deprecated.这里的许多答案都使用已弃用的e.keyCode和e.which 。

Instead you should use e.key === 'Enter' .相反，您应该使用e.key === 'Enter' 。

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode文档： https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

  • I'm sorry but I can't test these snippets just now.抱歉，我现在无法测试这些片段。 Will come back later after testing it.稍后会在测试后回来。

With HTML:使用 HTML：

<body onkeypress="if(event.key==='Enter' && event.target.form){focusNextElement(event); return false;}">

With jQuery:使用 jQuery：

$(window).on('keypress', function (ev)
{
    if (ev.key === "Enter" && ev.currentTarget.form) focusNextElement(ev)
}

And with Vanilla JS:和香草 JS：

document.addEventListener('keypress', function (ev) {
    if (ev.key === "Enter" && ev.currentTarget.form) focusNextElement(ev);
});

You can take focusNextElement() function from here: https://stackoverflow.com/a/35173443/3356679您可以从这里获取focusNextElement() function： https://stackoverflow.com/a/35173443/3356679

解决方案18
 0  2019-05-10 22:25:24

Here's what I came up with.这是我想出的。

form.addEventListener("submit", (e) => { //On Submit
 let key = e.charCode || e.keyCode || 0 //get the key code
 if (key = 13) { //If enter key
    e.preventDefault()
    const inputs = Array.from(document.querySelectorAll("form input")) //Get array of inputs
    let nextInput = inputs[inputs.indexOf(document.activeElement) + 1] //get index of input after the current input
    nextInput.focus() //focus new input
}
}

解决方案19
 0  2019-09-20 11:23:02

Easiest way to solve this problem with the focus function of JavaScript as follows:解决这个问题最简单的方法是JavaScript的焦点function如下：

You can copy and try it @ home!你可以复制试试@home！

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <input id="input1" type="text" onkeypress="pressEnter()" />
    <input id="input2" type="text" onkeypress="pressEnter2()" />
    <input id="input3" type="text"/>

    <script type="text/javascript">
    function pressEnter() {
      // Key Code for ENTER = 13
      if ((event.keyCode == 13)) {
        document.getElementById("input2").focus({preventScroll:false});
      }
    }
    function pressEnter2() {
      if ((event.keyCode == 13)) {
        document.getElementById("input3").focus({preventScroll:false});
      }
    }
    </script>

  </body>
</html>

解决方案20
 0  2023-01-19 02:21:36

I had a problem to use enter key instead of Tab in React js .The solution of anjana-silva is working fine and just some small issue for input date and autocomplete as I am using MUI.我在React js中使用回车键而不是 Tab 时遇到问题。anjana-silva的解决方案工作正常，只是输入日期和自动完成的一些小问题，因为我正在使用 MUI。 So I change it a bit and add arrow keys (left/right) as well.所以我稍微改变了它并添加了箭头键（左/右）。

install jquery using npm使用 npm 安装 jquery

npm install jquery --save

write the below in App.js If you want to have this behavior In the whole of your application在App.js中写下如果你想在整个应用程序中有这种行为

import $ from 'jquery';

useEffect(() => {

    $('body').on('keydown', 'input, select,button', function (e) {

        if (e.keyCode === 13 || e.keyCode === 39) {
            var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
            focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):enabled');
            next = focusable.eq(focusable.index(this) + 1);
            if (next.length) {
                next.focus();
            }
            return false;
        }

        if (e.keyCode === 37) {
            var self = $(this), form = self.parents('form:eq(0)'), focusable, prev;
            focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):enabled');
            prev = focusable.eq(focusable.index(this) - 1);
            if (prev.length) {
                prev.focus();
            }
            return false;
        }

    });

}, []);

解决方案21
 -1  2009-12-09 16:52:17

I had a simular need.我有一个类似的需要。 Here is what I did:这是我所做的：

  <script type="text/javascript" language="javascript">
    function convertEnterToTab() {
      if(event.keyCode==13) {
        event.keyCode = 9;
      }
    }
    document.onkeydown = convertEnterToTab;    
  </script>

解决方案22
 -1  2016-09-09 15:23:20

In all that cases, only works in Chrome and IE, I added the following code to solve that:在所有这些情况下，仅适用于 Chrome 和 IE，我添加了以下代码来解决该问题：

var key = (window.event)? var key = (window.event)? e.keyCode: e.which; e.keyCode: e.which;

and I tested the key value on if keycode equals 13如果键码等于 13，我测试了键值

    $('body').on('keydown', 'input, select, textarea', function (e) {
    var self = $(this)
      , form = self.parents('form:eq(0)')
      , focusable
      , next
    ;

    var key = (window.event) ? e.keyCode : e.which;

    if (key == 13) {
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this) + 1);
        if (next.length) {
            next.focus();
        } else {
            focusable.click();
        }
        return false;
    }
});

解决方案23
 -1  2019-06-27 06:44:24

$("#form input , select , textarea").keypress(function(e){
    if(e.keyCode == 13){
        var enter_position = $(this).index();
        $("#form input , select , textarea").eq(enter_position+1).focus();
    }
});

解决方案24
 -2  2009-06-17 22:23:57

You could programatically iterate the form elements adding the onkeydown handler as you go. This way you can reuse the code.您可以在 go 中以编程方式迭代添加 onkeydown 处理程序的表单元素。这样您就可以重用代码。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript：输入按键 - Javascript : Enter Key Press 按回车键然后自动按 shift + tab - Press enter key then automatically press shift + tab 使输入键在Javascript中表现得像tab键 - Make enter key behave like tab key in Javascript javascript避免输入按键 - javascript avoid enter key press 如何将输入键转换为选项卡键按网页 - How to Convert An Enter Key Press Into A Tab Key Press For Web Pages 如何将Tab键转换为Web的Enter键？ - How to Convert A Tab Key Press Into An Enter Key Press For Web Pages? JavaScript 用于处理 Tab 键按下 - JavaScript for handling Tab Key press javascript Enter按键并输入检查 - javascript Enter Key press and input check 在JavaScript中处理Alt + Enter键 - Handling Alt + Enter key press in JavaScript Javascript可以按Enter键吗？ - Can Javascript press the Enter key for me?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM