У меня есть четыре входа, каждый из которых занимает одно число. То, что я хочу сделать, автоматически устанавливает фокус на следующий вход после того, как номер был установлен. Все они имеют класс "входы".
Это не совсем сработало:
$(".inputs").keydown(function () {
$(this).next().focus();
});
Я бы предложил установить maxlength как 1 для каждого текстового поля и переключиться на следующий, как только val.length и maxlength будут такими же.
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
Изменить: Прошло некоторое время для следующих (не полностью протестированных, но базовые тесты работали нормально)
1. Allowing just numeric chars
2. Allow some control like del, backspace, e.t.c
3. Backspace on empty textbox will move to prev textbox
4. charLimit var to dynamically decide how many char you want to restrict.
Код:
$(function() {
var charLimit = 1;
$(".inputs").keydown(function(e) {
var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];
if (e.which == 8 && this.value.length == 0) {
$(this).prev('.inputs').focus();
} else if ($.inArray(e.which, keys) >= 0) {
return true;
} else if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
} else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
return false;
}
}).keyup (function () {
if (this.value.length >= charLimit) {
$(this).next('.inputs').focus();
return false;
}
});
});
Это просто получит следующий элемент, что бы это ни было. Вероятно, вы хотите:
$(".inputs").keyup(function () {
$(this).next(".inputs").focus();
});
Кроме того, запустите key not not keydown или он изменится слишком быстро.
После поиска и разработки я заканчиваю фрагмент crossbrowser, который позволяет сфокусировать следующее поле ввода с тем же классом в зависимости от maxlength (проверено с 1 символом), а также возможность сфокусироваться обратно с помощью кнопки backspace:
Javascript (jquery):
var codeCharInput = 'input.code-char';
$(codeCharInput+':first').focus();
$(codeCharInput).keyup(function(e) {
if ((e.which == 8 || e.which == 46)) {
$(this).prev(codeCharInput).focus().val($(this).prev().val());
} else {
if (this.value.length == this.maxLength) {
$(this).next(codeCharInput).focus();
}
}
});
HTML:
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
<input type="text" name="chars[]" maxlength="1" class="code-char" />
Вот код, который я использую для ввода ключа ввода, чтобы вести себя как вкладка, т.е. фокусироваться на следующий элемент при нажатии клавиши Enter или фокусировке предыдущего элемента при нажатии shift + Enter.
1) По существу:
tabables = $("*[tabindex != '-1']:visible");
var index = tabables.index(element);
tabables.eq(index + 1).focus();
2) Здесь вы являетесь "классом", который инкапсулирует поведение, имея в виду предыдущие и обратные и действительные настраиваемые элементы.
Я надеюсь, что это поможет, и если какой-то код соответствует вашим потребностям, не стесняйтесь приспосабливаться к вашим потребностям:)
EnterAsTab = function () {
this.ENTER_KEY = 13;
};
EnterAsTab.prototype.init = function () {
this.listenOnEnterKey();
};
EnterAsTab.prototype.listenOnEnterKey = function () {
var me = this;
$('form input').on('keypress', function (event) {
if (event.which === me.ENTER_KEY) {
if (!event.shiftKey)
me.findNextFocusableElement(this);
else
me.findPreviousFocusableElement(this);
event.preventDefault();
}
}
);
};
EnterAsTab.prototype.findNextFocusableElement = function (element) {
this.findFocusableElement(element, this.increaseIndex);
};
EnterAsTab.prototype.findPreviousFocusableElement = function (element) {
this.findFocusableElement(element, this.decreaseIndex);
};
EnterAsTab.prototype.findFocusableElement = function (element, callable) {
var tabables = $("*[tabindex != '-1']:visible");
var index = tabables.index(element);
var counter = 1;
var nextElement = undefined;
try {
while (true) {
if ((nextElement = tabables.eq(index + counter)).length === 0) {
break;
}
if (this.isFocusableElement(nextElement)) {
var newIndex = callable.call(this, index, counter);
tabables.eq(newIndex).focus();
break;
} else {
counter++;
}
}
} catch (error) {
console.log(error);
}
};
EnterAsTab.prototype.increaseIndex = function (index, counter) {
return (index + counter);
};
EnterAsTab.prototype.decreaseIndex = function (index, counter) {
return index - counter;
};
EnterAsTab.prototype.isFocusableElement = function (element) {
return ['SELECT', 'TEXTAREA'].indexOf(element.prop('tagName')) > -1 ||
element.is(':text') ||
element.is(':checkbox') ||
element.is(':radio');
};
var enterAsTab = new EnterAsTab();
enterAsTab.init();
Используйте keyup, например.
$(".inputs").keyup(function () {
$(this).next().focus();
});
Смотрите в действии http://jsfiddle.net/qygB2/
Если вы используете последнюю версию jQuery, я настоятельно рекомендую использовать метод on. Если вы перейдете к исходному коду jQuery, вы заметите, что все остальные методы событий теперь перенаправляются на этот метод, поэтому почему бы не использовать его напрямую:
$(document).ready(function () {
$('.inputs').on('keyup', function(){
$(this).next().focus();
})
});
Это будет сосредоточено на текстовом поле, после использования следующего без присвоения имени классу или идентификатору.
$(this).hide();
$(this).next().show();
$('input[type=text]').focus();
Основываясь на ответе @Vega
inputs.keydown(function(e) {
var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];
$(this).val('');
if (e.which == 8 && this.value.length == 0) {
$(this).prev(inputs).focus();
} else if ($.inArray(e.which, keys) >= 0) {
return true;
} else if (this.value.length > charLimit) {
$(this).next(inputs).focus();
return false;
} else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
return false;
}
}).keyup (function () {
if (this.value.length >= charLimit && $(this).next(inputs).attr('type') === 'text') {
$(this).next(inputs).focus();
return false;
}
});
Если пользователь нажимает на вход, который уже имеет значение, он будет переопределять его, вместо перехода на следующий вход, он будет также фокусироваться только на текстовых вводах. У меня была ситуация, когда у меня был ввод ввода рядом с текстовыми вводами, и если использование backspace может случайно перенаправить страницу.