Ich möchte eine Abfragelösung, ich muss nah dran sein, was muss getan werden?
$('html').bind('keypress', function(e)
{
if(e.keyCode == 13)
{
return e.keyCode = 9; //set event key to tab
}
});
Ich kann false zurückgeben und verhindert, dass die Eingabetaste gedrückt wird. Ich dachte, ich könnte den keyCode einfach auf 9 ändern, um ihn zu einem Tab zu machen, aber es scheint nicht zu funktionieren. Ich muss nah dran sein, was ist los?
Antworten:
$('input').on("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
Das funktioniert perfekt!
$('input').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible');
inputs.eq( inputs.index(this)+ 1 ).focus();
}
});
$('input').keydown(...ist die Abkürzung für $('input').on("keypress".... Sie sind beide dasselbe. Hast du einen Beweis?
Warum nicht so etwas Einfaches?
$(document).on('keypress', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
e.preventDefault();
return $(e.target).blur().focus();
}
});
Auf diese Weise lösen Sie die Übermittlung nur aus, wenn Sie sich bereits auf den Eingabetyp "Übermitteln" konzentriert haben, und Sie befinden sich genau dort, wo Sie aufgehört haben. Dadurch funktioniert es auch für Eingaben, die der Seite dynamisch hinzugefügt werden.
Hinweis: Die Unschärfe () befindet sich vor dem Fokus () für alle Personen, die möglicherweise Ereignis-Listener für "Unschärfe" haben. Es ist nicht erforderlich, dass der Prozess funktioniert.
(e.keyCode == 13) || (e.keyCode == 3 )
PlusAsTab : Ein jQuery-Plugin zur Verwendung der Numpad-Plus-Taste als Tabulator-Schlüsseläquivalent.
PlusAsTab kann auch so konfiguriert werden, dass die Eingabetaste wie in dieser Demo verwendet wird . Sehen Sie einige meiner älteren Antworten auf diese Frage .
In Ihrem Fall ersetzen Sie die Eingabetaste durch die Registerkartenfunktion für die gesamte Seite (nachdem Sie die Eingabetaste in den Optionen als Registerkarte festgelegt haben).
<body data-plus-as-tab="true">
...
</body>
git clone --recursive git://github.com/joelpurra/plusastab.git
tabindexwird vom Design ignoriert - siehe SkipOnTab versus tabindex . Sollte wahrscheinlich etwas Ähnliches schreiben oder von PlusAsTab und EmulateTab auf diese Seite verlinken.
Aufbauend auf Bens Plugin behandelt diese Version die Auswahl und Sie können eine Option an allowSubmit übergeben. dh. $("#form").enterAsTab({ 'allowSubmit': true}); Auf diese Weise kann enter das Formular senden, wenn die Schaltfläche "Senden" das Ereignis behandelt.
(function( $ ){
$.fn.enterAsTab = function( options ) {
var settings = $.extend( {
'allowSubmit': false
}, options);
this.find('input, select').live("keypress", {localSettings: settings}, function(event) {
if (settings.allowSubmit) {
var type = $(this).attr("type");
if (type == "submit") {
return true;
}
}
if (event.keyCode == 13 ) {
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
idx = -1;
} else {
inputs[idx + 1].focus(); // handles submit buttons
}
try {
inputs[idx + 1].select();
}
catch(err) {
// handle objects not offering select
}
return false;
}
});
return this;
};
})( jQuery );
Ich habe den Code aus der akzeptierten Antwort als jQuery-Plugin geschrieben, was ich nützlicher finde. (Außerdem werden jetzt ausgeblendete, deaktivierte und schreibgeschützte Formularelemente ignoriert.)
$.fn.enterAsTab = function () {
$(this).find('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(disabled):not([readonly])"),
idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
return this;
};
Auf diese Weise kann ich $ ('# form-id') ausführen. EnterAsTab (); Ich dachte, ich würde posten, da noch niemand es als $ Plugin gepostet hat und sie nicht ganz intuitiv zu schreiben sind.
Das ist es, was für mich endlich perfekt funktioniert. Ich benutze jqeasyui und es funktioniert gut
$(document).on('keyup', 'input', function(e) {
if(e.keyCode == 13 && e.target.type !== 'submit') {
var inputs = $(e.target).parents("form").eq(0).find(":input:visible"),
idx = inputs.index(e.target);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus();
inputs[idx + 1].select();
}
}
});
Folgendes habe ich verwendet:
$("[tabindex]").addClass("TabOnEnter");
$(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();
}
});
Schenkt dem Tabindex Aufmerksamkeit und ist nicht spezifisch für das Formular, sondern für die gesamte Seite.
Hinweis live wurde von jQuery überholt, jetzt sollten Sie verwendenon
Beinhaltet alle Arten von Eingaben
$(':input').keydown(function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 13) {
e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible:enabled');
if ((inputs.length-1) == inputs.index(this))
$(':input:enabled:visible:first').focus();
else
inputs.eq(inputs.index(this) + 1).focus();
}
});
enabled="false", setze die Tabindex-Reihenfolge und drücke die Eingabetaste, während sich der Cursor in einem Textfeld befindet. Dies löst immer noch die Standardaktion aus (senden Sie die erste Schaltfläche). Hat sich etwas geändert, das dazu führen würde, dass dies für mich anders sein muss? Ich habe keine Ahnung, was ich in Jquery mache, nur asp.NET und VB.NET.
.find(':input:visible:enabled[tabindex!="-1"]').not(':input[readonly]'); - schreibgeschützt zu überspringen und tabindex = -1 Felder ... 2) if (key == 13 && $(this).attr('type') != 'submit')
Dies ist meine Lösung, Feedback ist willkommen .. :)
$('input').keydown( function (event) { //event==Keyevent
if(event.which == 13) {
var inputs = $(this).closest('form').find(':input:visible');
inputs.eq( inputs.index(this)+ 1 ).focus();
event.preventDefault(); //Disable standard Enterkey action
}
// event.preventDefault(); <- Disable all keys action
});
Ich habe das Beste aus dem oben Gesagten genommen und die Möglichkeit hinzugefügt, mit jeder Eingabe außerhalb von Formularen usw. zu arbeiten. Außerdem wird eine ordnungsgemäße Schleife ausgeführt, um jetzt zu beginnen, wenn Sie die letzte Eingabe erreichen. Und wenn nur eine Eingabe unscharf ist, wird die einzelne Eingabe neu fokussiert, um externe Unschärfe- / Fokus-Handler auszulösen.
$('input,select').keydown( function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 13) {
e.preventDefault();
var inputs = $('#content').find(':input:visible');
var nextinput = 0;
if (inputs.index(this) < (inputs.length-1)) {
nextinput = inputs.index(this)+1;
}
if (inputs.length==1) {
$(this).blur().focus();
} else {
inputs.eq(nextinput).focus();
}
}
});
Diese Lösungen funktionierten nicht mit meinem Datagrid. Ich hatte gehofft, dass sie es tun würden. Ich brauche Tab oder Enter nicht wirklich, um zur nächsten Eingabe, Spalte, Zeile oder was auch immer zu gelangen. Ich brauche nur die Eingabetaste, um .focusout oder .change auszulösen, und mein Datagrid aktualisiert die Datenbank. Also habe ich die Klasse "enter" zu den relevanten Texteingaben hinzugefügt und dies hat den Trick für mich getan:
$(function() {
if ($.browser.mozilla) {
$(".enter").keypress(checkForEnter);
} else {
$(".enter").keydown(checkForEnter);
}
});
function checkForEnter(event) {
if (event.keyCode == 13) {
$(".enter").blur();
}
}
$('input').live("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input:visible");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
sichtbare Eingaben können nicht fokussiert werden.
Ich weiß, dass diese Frage älter als Gott ist, aber ich habe nie eine Antwort gesehen, die so elegant war.
doc.on('keydown', 'input', function(e, ui) {
if(e.keyCode === 13){
e.preventDefault();
$(this).nextAll('input:visible').eq(0).focus();
}
});
das scheint die Arbeit in so wenigen Zeilen wie möglich zu erledigen.
Sie sollten alle deaktivierten und schreibgeschützten Elemente filtern. Ich denke, dieser Code sollte keine Schaltflächen abdecken
$('body').on('keydown', 'input, select, textarea', function(e) {
var self = $(this),
form = self.parents('form:eq(0)'),
submit = (self.attr('type') == 'submit' || self.attr('type') == 'button'),
focusable,
next;
if (e.keyCode == 13 && !submit) {
focusable = form.find('input,a,select,button,textarea').filter(':visible:not([readonly]):not([disabled])');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
Ich hatte die gleichen Anforderungen in meiner Entwicklung, also habe ich darüber geforscht. Ich habe in den letzten zwei Tagen viele Artikel gelesen und viele Lösungen wie das jQuery.tabNext () Plugin ausprobiert.
Ich hatte einige Probleme mit IE11 (alle IE-Versionen haben diesen Fehler). Wenn ein Eingabetext gefolgt von einer Nicht-Texteingabe verwendet wurde, wurde die Auswahl nicht gelöscht. Daher habe ich meine eigene tabNext () -Methode basierend auf dem Lösungsvorschlag von @Sarfraz erstellt. Ich habe auch darüber nachgedacht, wie es sich verhalten soll (nur Kreis in der aktuellen Form oder vielleicht durch das vollständige Dokument). Ich habe mich immer noch nicht um die Tabindex-Eigenschaft gekümmert, hauptsächlich, weil ich sie gelegentlich benutze. Aber ich werde es nicht vergessen.
Damit mein Beitrag für alle leicht nützlich sein kann, habe ich hier ein jsfiddle-Beispiel erstellt https://jsfiddle.net/mkrivan/hohx4nes/
Ich füge hier auch den JavaScript-Teil des Beispiels hinzu:
function clearSelection() {
if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
document.getSelection().removeAllRanges();
document.getSelection().addRange(document.createRange());
console.log("document.getSelection");
} else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
if (window.getSelection().removeAllRanges) { // for all new browsers (IE9+, Chrome, Firefox)
window.getSelection().removeAllRanges();
window.getSelection().addRange(document.createRange());
console.log("window.getSelection.removeAllRanges");
} else if (window.getSelection().empty) { // maybe for old Chrome
window.getSelection().empty();
console.log("window.getSelection.empty");
}
} else if (document.selection) { // IE8- deprecated
document.selection.empty();
console.log("document.selection.empty");
}
}
function focusNextInputElement(node) { // instead of jQuery.tabNext();
// TODO: take the tabindex into account if defined
if (node !== null) {
// stay in the current form
var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])");
// if you want through the full document (as TAB key is working)
// var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])");
var idx = inputs.index(node) + 1; // next input element index
if (idx === inputs.length) { // at the end start with the first one
idx = 0;
}
var nextInputElement = inputs[idx];
nextInputElement.focus(); // handles submit buttons
try { // if next input element does not support select()
nextInputElement.select();
} catch (e) {
}
}
}
function tabNext() {
var currentActiveNode = document.activeElement;
clearSelection();
focusNextInputElement(currentActiveNode);
}
function stopReturnKey(e) {
var e = (e) ? e : ((event) ? event : null);
if (e !== null) {
var node = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
if (node !== null) {
var requiredNode = $(node).is(':input')
// && !$(node).is(':input[button]')
// && !$(node).is(':input[type="submit"]')
&& !$(node).is('textarea');
// console.log('event key code ' + e.keyCode + '; required node ' + requiredNode);
if ((e.keyCode === 13) && requiredNode) {
try {
tabNext();
// clearSelection();
// focusNextInputElement(node);
// jQuery.tabNext();
console.log("success");
} catch (e) {
console.log("error");
}
return false;
}
}
}
}
document.onkeydown = stopReturnKey;
Ich habe auch kommentierte Zeilen hinterlassen, damit ich meinen Gedanken folgen kann.
Ich weiß, dass dies ziemlich alt ist, aber ich suchte nach der gleichen Antwort und stellte fest, dass die gewählte Lösung dem tabIndex nicht entsprach. Ich habe es daher wie folgt geändert, was für mich funktioniert. Bitte beachten Sie, dass maxTabNumber eine globale Variable ist, die die maximale Anzahl tabellarischer Eingabefelder enthält
$('input').on("keypress", function (e) {
if (e.keyCode == 13) {
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
var tabIndex = parseInt($(this).attr("tabindex"));
tabIndex = (tabIndex + 1) % (maxTabNumber + 1);
if (tabIndex == 0) { tabIndex = 1; }
$('[tabindex=' + tabIndex + ']').focus();
$('[tabindex=' + tabIndex + ']').select();
return false;
}
});Hier ist ein von mir geschriebenes jQuery-Plugin, das die Eingabetaste als Rückruf oder als Tabulatortaste (mit einem optionalen Rückruf) behandelt:
$(document).ready(function() {
$('#one').onEnter('tab');
$('#two').onEnter('tab');
$('#three').onEnter('tab');
$('#four').onEnter('tab');
$('#five').onEnter('tab');
});
/**
* jQuery.onEnter.js
* Written by: Jay Simons
* Cloudulus.Media (https://code.cloudulus.media)
*/
if (window.jQuery) {
(function ($) {
$.fn.onEnter = function (opt1, opt2, opt3) {
return this.on('keyup', function (e) {
var me = $(this);
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13) {
if (typeof opt1 == 'function')
{
opt1(me, opt2);
return true;
}else if (opt1 == 'tab')
{
var eles = $(document).find('input,select,textarea,button').filter(':visible:not(:disabled):not([readonly])');
var foundMe = false;
var next = null;
eles.each(function(){
if (!next){
if (foundMe) next = $(this);
if (JSON.stringify($(this)) == JSON.stringify(me)) foundMe = true;
}
});
next.focus();
if (typeof opt2 === 'function')
{
opt2(me, opt3);
}
return true;
}
}
}).on('keydown', function(e){
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13)
{
e.preventDefault();
e.stopPropagation();
return false;
}
});
}
})(jQuery);
} else {
console.log("onEnter.js: This class requies jQuery > v3!");
}input,
select,
textarea,
button {
display: block;
margin-bottom: 1em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="one" type="text" placeholder="Input 1" />
<input id="two" type="text" placeholder="Input 2" />
<select id="four">
<option selected>A Select Box</option>
<option>Opt 1</option>
<option>Opt 2</option>
</select>
<textarea id="five" placeholder="A textarea"></textarea>
<input id="three" type="text" placeholder="Input 3" />
<button>A Button</button>
</form>Ich muss als nächstes nur zur Eingabe und Auswahl gehen, und das Element muss fokussierbar sein. Dieses Skript funktioniert besser für mich:
$('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,select,textarea').filter(':visible');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
Vielleicht hilft es jemandem.
Wenn Sie IE verwenden, hat dies für mich großartig funktioniert:
<body onkeydown="tabOnEnter()">
<script type="text/javascript">
//prevents the enter key from submitting the form, instead it tabs to the next field
function tabOnEnter() {
if (event.keyCode==13)
{
event.keyCode=9; return event.keyCode
}
}
</script>