How to force “enter key” to act as “tab key” using javascript?

杀马特。学长 韩版系。学妹 提交于 2019-12-09 04:44:37

问题


I'm working on a site that is full of forms to be filled and I it's required that when escape button is pressed focus move to the next input control, just as pressing "tab" do. I found code to move focus when keypressed is 13 but this need to take the ID of element to focus on

<input id="Text1" type="text" onkeydown="return noNumbers(event)" />
<input id="Text2" type="text" />

<script type="text/javascript">

    function noNumbers(e) {

        keynum = e.which;

        if (keynum == 13)
            document.getElementById("Text2").focus();

    }
</script>

I need a generalized function that when key pressed code is 13 "that is enter" fire the default event of pressing 9 "that is tab", of course in Javascript


回答1:


This will handle multiple input fields.

Here is the jQuery version: http://jsfiddle.net/TnEB5/3/

$('input').keypress(function(e) {
    if (e.which == 13) {
        $(this).next('input').focus();
        e.preventDefault();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Text1" type="text"  />
<input id="Text2" type="text" />
<input id="Text3" type="text" />

Here is the pure javascript version: http://jsfiddle.net/TnEB5/5/ (you probably want to get the sibling differently)

function tab(e) {
    if (e.which == 13) {
        e.target.nextSibling.nextSibling.focus();
        e.preventDefault();
    }
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
    var input = inputs[x];
    input.onkeypress = tab;
}
<input id="Text1" type="text"  />
<input id="Text2" type="text" />
<input id="Text3" type="text" />



回答2:


handle keypress instead and return false back to the browser:

http://jsfiddle.net/EeyTL/

<input id="Text1" type="text" />
<input id="Text2" type="text" />

<script type="text/javascript">
    document.getElementById('Text1').onkeypress = function (e) {
        if (e.which === 13) {
            document.getElementById("Text2").focus();
            return false;
        }
    };
</script>



回答3:


You'll need to explicitly set the tabindex property of the input fields for a generic solution. Something like

<input id="Text1" type="text" tabindex="1" />
<input id="Text2" type="text" tabindex="2" />

<script type="text/javascript">
    $('input').keypress(function(e){
        if(e.which==13){ 
            $("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus();
            e.preventDefault();
        }
    });    
</script>

this solution uses jquery to assign the event handler for all input type elements on the page, sets focus to the element with the next highest tabindex property, and prevents the form from submitting when enter is pressed using e.preventDefault(). Here's a jfiddle




回答4:


Althought the post is old, I hope my answer can help someone in need. I have a smilar situation:

I have a very large form for an employee scheduler application with different types of input fields. Some of the input fields are hidden sometimes and not other times. I was asked to make the enter key behave as the tab key so the users of the form could use the 10-key when creating thier employees schedule. Here is how I solved my problem:

$(document).ready(function () {
    var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form)
    $(":text").on("keydown", function () {//(2)When an input field detects a keydown event
        if (event.keyCode == 13) {
            event.preventDefault();
            var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs
            if (nextInput) {
                nextInput.focus(); //(4)focus that next input if the input is not null
            }
        }
    });
});

What I had to do was:

  1. Create a collection of all the inputs I want to consider when tabbing. in my case it is text inputs that are visible.
  2. Listen for a keydown event on the inputs in question, in my case all text field inputs
  3. When the enter is pressed on my text input, determine what input is next to be focused.
  4. If that input is valid, bring it into focus.



回答5:


<input type="text" value="" onkeyup="doNext(this);"> a <br>
<input type="text" value="" onkeyup="doNext(this);"> b <br>
<input type="text" value="" onkeyup="doNext(this);"> c <br>

function doNext(el){                   
  if(event.keyCode=='13'){
    var nextEl = el.form.elements[el.tabIndex+1];
    if (nextEl && nextEl.focus) nextEl.focus();
  }
}



回答6:


I am using this code for advancing to next input field. I hate to press TAB key. And this solution works in IE & Firefox:

<script type="text/javascript"> 
  function tabE(obj,e){ 
   var e=(typeof event!='undefined')?window.event:e;// IE : Moz 
   if(e.keyCode==13){ 
     var ele = document.forms[0].elements; 
     for(var i=0;i<ele.length;i++){ 
       var q=(i==ele.length-1)?0:i+1;// if last element : if any other 
       if(obj==ele[i]){ele[q].focus();break} 
     } 
  return false; 
   } 
  } 
</script> 

HTML Content

<form id="main">
     <input name="" type="text" onkeypress="return tabE(this,event)">
     <input type="submit" value="Ok">
</form>



回答7:


I believe using e.preventDefault(); is safer than returning false.



来源:https://stackoverflow.com/questions/10537558/how-to-force-enter-key-to-act-as-tab-key-using-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!