我已经将autotab.js下载到我的application.And中,我正尝试在我的应用程序中使用它。
我有一个表单,我想在填写一个输入field.ALso后自动跳转到下一个输入DOM元素,该表单仅在页面中生成,因此我不能使用字段id作为已知factor.How的autotab来使用JQuery执行此操作。
发布于 2009-07-17 13:22:27
如果无法将ids添加到输入,则需要为这些属性找到不同的选择器。
如果您计划发送此数据,您可能已经为这些标记指定了一个名称。然后,您可以使用以下选择器按名称匹配下一个输入:
$('input[name=nextInputName]')否则,您总是可以使用children()和parent()方法调用的组合来查找下一个元素,以便从当前输入遍历到下一个元素。
我个人认为最简单的解决方案是分配it,即使是在jQuery中,如果你不能在HTML语言中这样做:这将使自动聚焦变得更容易。
var counter = 0;
$('input').each(function () {
if (!$(this).attr('id')) {
$(this).attr('id', 'autofocus' + counter);
counter += 1;
}
});您可以更改选择器以跳过某些不希望具有自动聚焦功能的元素。
然后你甚至可以在几行代码中写下自动对焦:
$('input[id^=autofocus]').keyup(function () {
if ($(this).val().length === $(this).attr('maxlength')) {
var id = $(this).attr('id').match(/^autofocus(\d+)$/[1]);
var nextId = Number(id) + 1;
$('#autofocus' + nextId).focus()
}
});发布于 2012-02-07 03:21:14
此函数用于读取输入上设置的最大长度。你可以使用$('input.autotab').autotab();
jquery函数如下:
$.fn.autotab = function (){
$(this).keyup(function(e){
switch(e.keyCode){
// ignore the following keys
case 9: // tab
return false;
case 16: // shift
return false;
case 20: // capslock
return false;
default: // any other keyup actions will trigger
var maxlength = $(this).attr('maxlength'); // get maxlength value
var inputlength = $(this).val().length; // get the length of the text
if ( inputlength >= maxlength ){ // if the text is equal of more than the max length
$(this).next('input[type="text"]').focus(); // set focus to the next text field
}
}
});};
发布于 2014-02-20 01:47:16
这就是我能够让自动标签功能为我工作的方式。希望它能帮助其他人。
<input type="tel" id="areaPhone" name="areaPhone" data-next-field="prefixPhone" maxlength="3">
<input type="tel" id="prefixPhone" name="prefixPhone" data-next-field="suffixPhone" maxlength="3">
<input type="tel" id="suffixPhone" name="suffixPhone" maxlength="4">/* jQuery Ready */
$('input[type=tel]').keyup(function () {
/* Steps:
1. Get length values from field
2. Get maxlength value of field and convert to integer
3. Get data-next-field value of next field to focus on
4. Concat a hashtag and data value of field to jump to
*/
var fieldVal = $(this).val(),
fieldLen = fieldVal.length,
fieldMaxLen = parseInt($(this).attr('maxlength')),
jumpToField = $(this).data('next-field'),
nextFieldID = '#' + jumpToField;
// Check if field length and maxlength are equal
if (fieldMaxLen === fieldLen) {
// Check if data-next-field attribute is undefined or null
if (jumpToField === undefined || jumpToField === null) {
} else {
$(nextFieldID).focus();
}
}});
https://stackoverflow.com/questions/1143069
复制相似问题