Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

autotab doesn't work. I'll take any solution. JavaScript

  • SOLVED

verlager.com/cccr/rating.php

<link rel="stylesheet" href="css/jquery-ui.autocomplete.min.css" media = "screen" />

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>

<script src="js/jquery-ui.min_autocomplete_tool.js"></script>

</script>function autotab(current,to) { if (current.getAttribute && current.value.length==current.getAttribute("maxlength")) {to.focus();}}></script>

<form id = "truck">
<input type="text" class = "inputs" maxlength="1">
<input type="text" class = "inputs" disabled maxlength="1">
<input type="text" class = "inputs" maxlength="1">
<input type="text" class = "inputs" maxlength="1">
<input type="text" class = "inputs" maxlength="1">
<input type="text" class = "inputs" maxlength="1">
</form>

Answers (2)

2019-10-15

timDesain Nanang answers:

try this code:

<script>
jQuery(document).ready(function($){
$("#truck input").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('input').focus();
}
});
});
</script>

<form id="truck">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</form>


timDesain Nanang comments:

make sure to remove space between id and =


Arnav Joy comments:

can you please describe more about your requirement?


User180435 comments:

This on;y works with a simple form and basic input fields. But my form under tdexport has disabled input fields and hidden fields, The code simply doesn't tab to the next input field.

2019-10-15

Rainner Lins answers:

Try something like this, it checks for disabled and hidden inputs and skips them to the next available input:

https://jsfiddle.net/rainnerlins/r9kcbz48/


User180435 comments:

Rainner: see http://verlager.com/cccr/rating.php

Uncaught TypeError: $(...).ready(...) is not a function
at rating.php:107


Rainner Lins comments:

My bad, had some issues with my code, here's a fix:

https://jsfiddle.net/rainnerlins/ofacsx1e/


User180435 comments:

<script>
//**
* Auto-tab inputs
*/
$(function() {

// focus on next input, skip disabled and hidden inputs
const nextInput = function( curInput ) {
const next = $( curInput ).next( 'input' ).get( 0 );
if ( next ) {
if ( next.disabled || next.type === 'hidden' ) {
return nextInput( next );
}
next.focus();
}
};

// listen for typing events on selected inputs, check maxLength prop
$( "#reg input" ).keyup( function( e ) {
if ( this.value.length == this.maxLength ) {
nextInput( this );
}
});

});
</script>


Fine but it doesn't work where it needs to.



<script>

clipper();

function clipper(){

let list = document.querySelector('#reg');
let items = '';

for (let i = 0; i < maytag.length; i++) {

items += `<input type = "text" tabindex="${i+1}"
class = "lay result inputs" //onkeyup='this.value = this.value.replace(/[^wldzxfWLDZX]/,"");'
maxlength = "1" size = "1" id="R${i}" />`; // WLD etc. THIS DOESN'T WORK; AUTOTAB DOESN'T WORK
}


list.innerHTML = items;

for (let i = 0; i < maytag.length; i++) {
if (i < 9) {pad = ' '} else {pad = "";}

{document.getElementById("I" +i).value = pad +(i+1) + ". " +maytag[i].name;
document.getElementById("K" +i).value = maytag[i].id;}

}
}

</script>