Zrobiłem stronę za pomocą jquery, a po załadowaniu automatycznie wybiera pierwsze pole tekstowe. Chcę, aby następnie przejść do następnego pola po naciśnięciu klawisza ENTER.Jquery wybierz pole tekstowe NEXT na klawisz Enter Naciśnij przycisk
$('.barcodeField input').bind('keyup', function(event) {
if(event.keyCode==13){
$("this + input").focus();
}
});
Nie mogę znaleźć niczego, co działa w sieci. I przetrząsnąłem fora.
Należy użyć:
$(this).next('input').focus();
To zadziała, jeśli następne rodzeństwo ma postać '', ale jeśli jest to '
Zasadniczo wystarczy top posiadają elementów DOM w pewnej strukturze, dzięki czemu można wybrać następny. Sugerowałbym wykorzystanie tabindex, ale wszystko, co pozwala ci mieć zdefiniowane zamówienie, zadziała.
Stworzyłem małą funkcję, która może zrobić to, czego potrzebujesz. To jest wersja, której używam, więc możesz potrzebować zmienić nazwy klas, ale powinieneś uzyskać ten pomysł.
<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>
Więc zasadniczo: -
Dobra robota, to dobra odpowiedź: – MaVRoSCy
powinna być zaakceptowaną odpowiedzią! – nemesisfixx
jakikolwiek pomysł na okrąg, jeśli osiągniesz koniec wejścia, przejdź do indeksu 0 coś w tym stylu? –
spróbuj tego:
(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);
użycia:
$('form.element').enterNext();
w moim przypadku jest to najlepsze rozwiązanie, że mam ponieważ .next function() jest ściśle z elementami poza ich oddziału DOM. Najlepszym sposobem jest wymuszenie indeksu.
i przepraszam za mój zły język angielski ...
Oto rozwiązanie wymyśliłem. Problem polegał na tym, że musiałem utrzymywać tabindex, tzn. Musiałem funkcjonować dokładnie tak samo, jak z zakładką. Używa zarówno podkreślnika, jak i jquery.
Zostawiłam w moim debugowanie kodu:
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);
}
<!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>
Ciekawe, bo odpowiedział na pytanie tak jak ten :) http://stackoverflow.com/questions/4494552/change-enter- od-zgłoszenie-do-tab/4494691 # 4494691. Dodatkowo odradzam to, ponieważ użytkownicy są przyzwyczajeni do używania tabulatora, aby przejść do innego pola, zamiast wpisywać. –
** nie rób tego **. – zzzzBov
Tak, wiem, że nie jest to całkowita liczba, jeśli chodzi o strony internetowe, ale dotyczy to systemu mapowania kodów kreskowych za pomocą skanera kodów kreskowych, który zapisuje się na ekranie w tym formacie "," + kod kreskowy + "ENTER" –