I have two input fields one for advance payment and other for full payment, which are fetched from the database in array.
If onchange or keyup the advance payment is greater than full payment, Then the advance payment should not be entered or should be equal to full payment.
I am trying with this code
<input type="text" value="<?php echo $full_payemnt; ?>" id="full_payment_<?php echo $i; ?>">
<input type="text" id="advance_payment_<?php echo $i; ?>" class="advance">
$('.advance').on('change keyup blur', function(e){
var fullPay = $('#full_payment_'+id[1]).val();
var advancePay = $('#advance_payment_'+id[1]).val();
console.log( parseInt(advancePay) > parseInt(fullPay))
if (parseInt(advancePay ) > parseInt(fullPay)) {
e.preventDefault();
$('#advance_payment_'+id[1]).val(fullPay);
}
});
Here is an example of how you can do it.
var $full = $('[name=full]');
var $adv = $('[name=adv]');
$adv.on('keyup keydown', function(e) {
var fullPay = parseInt($full.val(), 10);
var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10
if (advPay > fullPay &&
e.keyCode !== 46 // keycode for delete
&&
e.keyCode !== 8 // keycode for backspace
) {
e.preventDefault();
$adv.val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="full" />
<input type="number" name="adv" />
Try this, I think you want this.
$('.advance').on('change keyup blur', function(e){
id_arr = $(this).attr('id');
id = id_arr.split("_");
var fullPay = $('#fullPayment_'+id[1]).val();
var advancePay = $('#advancePayment_'+id[1]).val();
if ($(this).val() > parseInt(fullPay)) {
e.preventDefault();
$(this).val(fullPay);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<input type="text" value="12" id="fullPayment_1">
<input type="text" id="advancePayment_1" class="advance">
</tr>
<br>
<tr>
<input type="text" value="19" id="fullPayment_2">
<input type="text" id="advancePayment_2" class="advance">
</tr>
Made some changes to Sam Battat's answer so that each time a wrong entry is being typed it erase the entered number instead of clearing the field.
var $full = $('[name=full]');
var $adv = $('[name=adv]');
$adv.on('keyup keydown', function(e) {
var fullPay = parseInt($full.val(), 10);
var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10
if (advPay > fullPay &&
e.keyCode !== 46 // keycode for delete
&&
e.keyCode !== 8 // keycode for backspace
) {
e.preventDefault();
$the_value = $adv.val();
$the_value = $the_value.substring(0, $the_value.length - 1);
$adv.val($the_value);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="full" />
<input type="number" name="adv" />
Related
How to limit two inputs with custom maxlength ?
I am setting a custom limit $limit = "500"; and trying to limit user words in two inputs. I want to limit first input maxlength and count words in first input, than limit second input maxlength with words left from my custom limit.
I want to set length together max length 500, one can have max 100 and one can have max 400.
and if first input has less words than 100, then add rest of the words left to the second input max length.
like : first input has 95 words in, 5 words left to reach limit.
then change second input maxlentgh to 405,
I create inputs like this :
function maxLength(el) {
if (!('maxLength' in el)) {
var max = el.attributes.maxLength.value;
el.onkeypress = function() {
if (this.value.length >= max) return false;
};
}
}
maxLength(document.getElementById("title"));
function validateLength(el, word_left_field, len) {
document.all[word_left_field].value = len - el.value.length;
if (document.all[word_left_field].value < 1) {
alert("You can add max " + len + " words .");
el.value = el.value.substr(0, len);
document.all[word_left_field].value = 0;
return false;
}
return true;
}
<input type="text" id="title" name="title" maxlength="100" onChange="return validateLength(this, 'word_left', 100);" onKeyUp="return validateLength(this, 'word_left', 100);">
<input type="text" name="word_left" value="100" style="width: 25;" readonly="true" size="3">
<input type="text" id="subject" name="subject" maxlength="400" onChange="return validateLength(this, 'word_left', 400);" onKeyUp="return validateLength(this, 'word_left', 400);">
<input type="text" name="word_left" value="400" style="width: 25;" readonly="true" size="3">
so total of both inputs is 500.
I tried to set html 5 attributes pattern=".{59,60}" but they are same as setting attrbutes min and length.
But my javascript is limiting first input.
I tried several methods but didn't have a chance to make it work, would be to long question I didnt put all on here.
I belive that you need something like this:
var _maxLength = 500;
var _lengthInput = 0;
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var p = document.getElementById("total");
p.innerHTML = _maxLength;
input1.addEventListener("focus", function(e) {
this.maxLength = _maxLength + this.value.length;
_lengthInput = this.value.length;
});
input1.addEventListener("blur", function(e) {
if (_lengthInput == this.value.length)
return;
if (_lengthInput > this.value.length) {
_maxLength += _lengthInput - this.value.length;
} else {
_maxLength -= this.value.length - _lengthInput;
}
total.innerHTML = _maxLength;
});
input2.addEventListener("focus", function(e) {
this.maxLength = _maxLength + this.value.length;
_lengthInput = this.value.length;
});
input2.addEventListener("blur", function(e) {
if (_lengthInput == this.value.length)
return;
if (_lengthInput > this.value.length) {
_maxLength += _lengthInput - this.value.length;
} else {
_maxLength -= this.value.length - _lengthInput;
}
total.innerHTML = _maxLength;
});
Input 1 <input type="text" id="input1">
<br /> Input 2 <input type="text" id="input2">
<br />
<p>Characters remaining: <span id="total"></span> </p>
I hope below code helps you,
$(document).ready(function () {
$("#subject").on("keypress", function () {
var titleLength = $("#title").val().length;
var titleMaxLength = $("#title").attr("maxLength");
var titleWordLeft = titleMaxLength - titleLength
var subjectLength = $("#subject").data("charlength");
var subjectMaxLength = titleWordLeft + subjectLength;
$("#subject").attr("maxLength",subjectMaxLength);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="title" name="title" maxlength="100">
<input type="text" name="word_left" value="100" style="width: 25;" readonly="true" size="3">
<input type="text" id="subject" name="subject" data-charlength="400">
<input type="text" name="word_left" value="400" style="width: 25;" readonly="true" size="3">
I am doing some validations for the input type.
<input
type="number"
min="0"
decimal-places=""
ng-model="candidate.ctc"
class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateCTCInputPosition"
id="ctc"
placeholder="CCTC"
autocomplete="off"
required="">
Here, with this user is not able to take the 0 as an input, So, when user types the 0 then it is treating it as a false value.
So, user should not be able to type negative values using the keyups and also it should accept the 0. How can I achieve this?
Here's a working solution:
http://jsfiddle.net/qoL16sup/
Directive:
decimalPlaces.$inject = ['$filter','$locale'];
function decimalPlaces($filter,$locale){
return {
require: 'ngModel',
link: function(scope,element,attrs,ngModelCtrl){
var groupSep = $locale.NUMBER_FORMATS.GROUP_SEP;
var decimalSep = $locale.NUMBER_FORMATS.DECIMAL_SEP;
var decimalPlaces = scope.$eval(attrs['decimalPlaces']) || 0;
var pattern = decimalPlaces > 0 ?
new RegExp('^\\d*(\\'+ decimalSep +')?[0-9]{0,' + decimalPlaces + '}$') : new RegExp('^\\d*$');
element.bind('keypress',function(e){
var lastChar = e.charCode!==0?String.fromCharCode(e.charCode):'';
var selectionStart = element[0].selectionStart;
var selectionEnd = element[0].selectionEnd;
var newVal = element.val().slice(0,selectionStart) + lastChar + element.val().slice(selectionEnd);
if(!pattern.test(newVal)){
e.preventDefault();
}
});
element.bind('blur',function(){
var value = ngModelCtrl.$viewValue || ngModelCtrl.$modelValue;
if (ngModelCtrl.$isEmpty(value)) return null;
if(pattern.test(value)){
element.val($filter('number')(value,decimalPlaces));
}else{
element.val('');
ngModelCtrl.$setViewValue('');
ngModelCtrl.$commitViewValue();
}
});
element.bind('focus',function(){
var value = ngModelCtrl.$modelValue || ngModelCtrl.$viewValue;
if (ngModelCtrl.$isEmpty(value)) return null;
element.val(value);
});
ngModelCtrl.$parsers.unshift(function(value){
if (ngModelCtrl.$isEmpty(value)) return null;
if(pattern.test(value)){
value = parseFloat(value);
if(decimalPlaces){
value = value.toFixed(decimalPlaces);
}else{
value = Math.floor(value);
}
return parseFloat(value);
}else{
return null;
}
});
if (angular.isDefined(attrs.min)) {
var minVal = scope.$eval(attrs.min);
ngModelCtrl.$validators.min = function(value) {
return ngModelCtrl.$isEmpty(value) || angular.isUndefined(minVal) || value >= minVal;
};
}
if (angular.isDefined(attrs.max)) {
var maxVal = scope.$eval(attrs.max);
ngModelCtrl.$validators.max = function(value) {
return ngModelCtrl.$isEmpty(value) || angular.isUndefined(maxVal) || value <= maxVal;
};
}
}
}
}
HTML:
<form name="myForm" novalidate autocomplete="off">
<label>
Decimal places = 0
<input
type="text"
name="input1"
decimal-places="0"
ng-model="model.input1"
autocomplete="off"
required>
</label>
<br/> <br/>
<lable>
Decimal places = 2:
<input
type="text"
name="input2"
decimal-places="2"
ng-model="model.input2"
autocomplete="off"
required>
</lable>
<br/> <br/>
<lable>
Decimal places = 2, min = 100, max = 10000:
<input
type="text"
name="input3"
decimal-places="2"
min="100"
max="10000"
ng-model="model.input3"
autocomplete="off"
required>
</lable>
</form>
You can use ngPattern to validate the input. But it won't prevent the user from typing a negative number. Use a following function to avoid typing a negative value.
$(document).ready(function(){
$("#ctc").keydown(function(e){
if (e.key == "." || e.key=="-") {
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Preventing negative values</p>
<input type="number" min="0" max="10" decimal-places="" ng-model="candidate.ctc" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateCTCInputPosition" id="ctc" placeholder="CCTC" autocomplete="off" style='width:300px' required=""/>
You should use like this,
var number = document.getElementById('ctc');
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}
It's happening a weird thing on my form built with Html and jQuery. Basically I've created a stupid function that detracts a percentage (my platform fees) from the amount inserted into the first input and place the recalculated one into the second. Of course it happens reversely.
It's something like:
Input 1: What you offer
Input 2: What you receive (detracted of my platform fees)
As you can see through the image (more or less), when I insert into the first input 1000, the second input will be filled with 930 if my percentage is 7%. Pretty straight.
The issue happens when I press tab from the first input to the second. The second stays with its value but the first gets further detracted of an undefined amount that I cannot identify or prevent. I don't know why, I'm probably missing something very stupid but I cannot see it.
Here is my html:
<div class="row top-15 form-group">
<div class="col-sm-6">
<h4>
<?php _e('Your bid','dev'); ?>
</h4>
<p>
<?php _e("Insert project's budget",'dev'); echo $budget;?>
</p>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
<input type="number" name="mybid" id="bid" class="form-control" value="<?php echo $bid; ?>" placeholder="<?php _e(" How much you offer ", "dev ") ?>" data-alert="<?php _e('Please type in a bid value.','dev'); ?>" />
</div>
</div>
<div class="col-sm-6">
<h4>
<?php _e("You will receive",'dev'); ?>
</h4>
<p>
<?php printf(__("%s of fees", 'dev'), '-' . $Dev_fee_after_paid . '%') ?>
<span id="fees" data-fees="<?php echo $Dev_fee_after_paid ?>"></span>
</p>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
<input type="number" name="total" id="total" class="form-control" value="" size="10" placeholder="<?php _e(" What you get ", "Dev ") ?>" />
</div>
</div>
</div>
My jQuery
var currency = $('#make-application').attr('data-currency');
var setFees = $('#fees').attr('data-fees');
var bid = $('#bid').val();
var fees = (bid/100)*setFees;
// $("#total").val(total.toFixed(2));
$("#fees").text(' = ' + fees.toFixed(0) + currency);
$('#bid, #total').on('focusout', function(e) {
e.preventDefault();
e.stopPropagation();
});
$("#bid").on('keyup', function(e){
var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(newbid) === false){
$(this).addClass('error');
return;
}
if(newbid > 0){
$("#total").val(total.toFixed(0));
$("#fees").text(' = ' + newfees.toFixed(0) + currency);
} else {
$("#total").val('');
}
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(newbid);
}
});
$("#total").on('keyup', function(e){
var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(bidTwo) === false){
$(this).addClass('error');
return;
}
if(totalTwo > 0){
$("#bid").val(bidTwo.toFixed(0));
$("#fees").text(' = ' + feesTwo.toFixed(0) + currency);
} else {
$("#bid").val('');
}
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(totalTwo);
}
});
As you can see I've tried to preventDefault and stopPropagation on keycode == 9 without success. Could you give me some direction please?
Your math is wrong. If your math was right it wouldn't matter if you update one box from the other, and then immediately do the opposite.
rightbox = leftbox * (1 - setfees / 100)
so
leftbox = rightbox / (1 - setfees / 100)
When you put input into the first box, you update the second box:
var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;
newbid: 1000
newfees: (1000/100)*7 = 70
total: 1000-70 = 930
Then, when tab is pressed, the keyup event is fired on the second box, which in turn updates the first box:
var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);
totalTwo: 930
feesTwo: (930/100)*7 = 65
bidTwo: 65+930 = 995
You should change how the events fire, as well as your logic calculating the values.
You are checking if it is a tab press at the end of the function. Try putting it to the top.
var currency = $('#make-application').attr('data-currency');
var setFees = $('#fees').attr('data-fees');
var bid = $('#bid').val();
var fees = (bid/100)*setFees;
// $("#total").val(total.toFixed(2));
$("#fees").text(' = ' + fees.toFixed(0) + currency);
$('#bid, #total').on('focusout', function(e) {
e.preventDefault();
e.stopPropagation();
});
$("#bid").on('keyup', function(e){
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(newbid);
}
var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(newbid) === false){
$(this).addClass('error');
return;
}
if(newbid > 0){
$("#total").val(total.toFixed(0));
$("#fees").text(' = ' + newfees.toFixed(0) + currency);
} else {
$("#total").val('');
}
});
$("#total").on('keyup', function(e){
var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(totalTwo);
}
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(bidTwo) === false){
$(this).addClass('error');
return;
}
if(totalTwo > 0){
$("#bid").val(bidTwo.toFixed(0));
$("#fees").text(' = ' + feesTwo.toFixed(0) + currency);
} else {
$("#bid").val('');
}
});
I have a set of input elements within 2 span block. I need to automatically select next input element by using onKeup(). This works fine until span tag is found. After that it is not detecting.
In the following code next input element is detected until 3rd input box after that it is not detected.
Can any one help with this?
http://jsfiddle.net/et3escuh/8/
<span>
<input id="opnamenummer6" class="form-control" type="text" name="opnamenummer6" value="" maxlength="1">
<input id="opnamenummer7" class="form-control" type="text" name="opnamenummer7" value="" maxlength="1">
<input id="opnamenummer8" class="form-control" type="text" name="opnamenummer8" value="" maxlength="1">
</span>
<script type="text/javascript">
$('input[class*="form-control"]').keyup(function(event) {
var $this = $(this);
var currentLength = $this.val().length;
var maximumLength = $this.attr('maxlength');
// if we've filled up this input, go to the next if only numerics are entered.
if ( (currentLength == maximumLength) && ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which<= 105))) {
$this.next().select();
}
//go to previous input if Backspace or Delete buton is pressed
if(event.which == 8 || event.which == 46) {
$(this).val('');
$(this).prev('input').select();
}
});
</script>
Don't use next(), use eq() and add or subtract to the index
$('input[class*="form-control"]').keyup(function(event) {
var $this = $(this);
var currentLength = $this.val().length;
var maximumLength = $this.attr('maxlength');
if ( (currentLength == maximumLength) && (!isNaN(this.value))) {
$('input').eq($(this).index('input') + 1).select();
}
if(event.which == 8 || event.which == 46) {
$(this).val('');
$('input').eq($(this).index('input') - 1).select();
}
});
FIDDLE
i have 5 textbox like
<input type ="text" size="3" name="r"><br>
<input type ="text" size="3" id="1" onchange="vali(this.id)" name="I"><br>
<input type ="text" size="3" name="a"><br>
<input type ="text" size="3" name="s"><br>
<input type ="text" size="3" name="e">
function vali(d){
if(document.getElementById(d).value <0 || document.getElementById(d).value >=30)}
I want user should enter only max 2 digits on each field between 0 & 30. I'm not able to restrict user to enter only 2 digits in field, for example when user enters 151, 15 should come on 1st field and then focus will go on 2nd field automatically and remaining digits will be entered in 2nd field and will be there till the user enters another digit. After entering focus will come on field 3 like this. Also I need to check to each field contain a number between 0 and 30 which I'm checking in above code.
Also when user submit the form all field should be checked for value between (0 to 30) If there is any field present alert bos should pop up else go to next page.i m not able to do this part .this is my form part above the 5 input field
<form name="detail" action ="selectjzone.jsp" onsubmit="return validate(this)">
and edited part is
if (num < 0) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " " + "is outside the range0 to 30" );
return false;
} else if (num > 30) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " "+ "is outside the range0 to 30" );
return false;
}
return true;
}
Here's a start at how to validate the field and move any extra to the next field:
Working demo here: http://jsfiddle.net/jfriend00/vpTq5/
HTML:
<input id="a" type ="text" size="3" onkeyup="validate(this, 'b')" name="r"><br>
<input id="b" type ="text" size="3" onkeyup="validate(this, 'c')" name="I"><br>
<input id="c" type ="text" size="3" onkeyup="validate(this, 'd')" name="a"><br>
<input id="d" type ="text" size="3" onkeyup="validate(this, 'e')" name="s"><br>
<input id="e" type ="text" size="3" onkeyup="validate(this)" name="e">
Javascript:
function validate(obj, next) {
// fetch value and remove any non-digits
// you could write more code to prevent typing of non-digits
var orig = obj.value;
var mod = orig.replace(/\D/g, "");
var nextObj;
// check length and put excess in next field
if (mod.length > 2) {
// shorten the current value
obj.value = mod.substring(0,2);
if (next) {
// put leftover into following value
var nextObj = document.getElementById(next);
if (!nextObj.value) {
nextObj.value = mod.substring(2);
nextObj.focus();
}
}
} else {
// only set this if necessary to prevent losing cursor position
if (orig != mod) {
obj.value = mod;
}
}
// convert to number and check value of the number
var num = Number(obj.value);
// don't know what you want to do here if the two digit value is out of range
if (num < 0) {
obj.value = "0";
} else if (num > 30) {
obj.value = "30";
}
}
Some notes:
Id values on HTML objects cannot start with a digit. They must start with a letter.
You will have to decide what behavior you want when a number greater than 30 is entered.
Keep in mind that input field values are strings. If you want to treat them like a number, you have to convert them to be numeric.
With more code, you can actually prevent the typing of non-numeric keys and you can move the focus before the 3rd value is typed.
There are ways to get data into fields that does not trigger onkeyup (copy/paste, drag/drop) so you will have to validate at other times too.
If you can use a framework like jQuery, this can be done in a simpler way.
Here is the code for automatic focusing on next field when you keep on typing,
you need to take of validating number between 0 & 30. Hope this helps,
<script>
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function chkEvent(e){
var keyCode = (isNN) ? e.which : e.keyCode;
if(e.shiftKey==1 && keyCode == 9) return false;
if(e.shiftKey==1 || keyCode == 9 || keyCode == 16) return false;
return true;
}
function autoTab(current,to, e) {
var keyCode = (isNN) ? e.which : e.keyCode;
var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
if(current.getAttribute && current.value.length == current.getAttribute("maxlength") && !containsElement(filter,keyCode)) to.focus();
function containsElement(arr, ele) {
var found = false, index = 0;
while(!found && index < arr.length) if(arr[index] == ele) found = true; else index++;
return found;
}
return true;
}
</script>
<input type ="text" size="3" maxlength="2" name="r" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('1'), event);}"><br>
<input type ="text" size="3" maxlength="2" id="1" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('a'), event);}" name="I"><br>
<input type ="text" size="3" maxlength="2" id="a" name="a" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('s'), event);}"><br>
<input type ="text" size="3" maxlength="2" id="s" name="s" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('e'), event);}"><br>
<input type ="text" size="3" maxlength="2" id="e" name="e" >
Here is pure javascript solution is it like what you wanted at all?
http://jsfiddle.net/rfyC8/
Code:
var ieEvents = !!document.attachEvent,
addEvent = ieEvents ? "attachEvent" : "addEventListener",
keyUp = ieEvents ? "onkeyup" : "keyup";
function validator( e ) {
var sib, intValue, val = this.value;
if( val.length >= 2 ) {
intValue = parseInt( val, 10 );
if( isNaN( intValue ) || intValue < 0 || intValue > 30 ) {
this.value = "";
return false;
}
sib = this.nextSibling;
while( sib && sib.className != "textfield" ) {
sib = sib.nextSibling;
}
if( sib ) {
sib.focus();
}
else {
return false;
}
}
}
document.getElementById("textfields")[addEvent]( keyUp,
function(){
var e = arguments[0] || window.event,
target = e.target || e.srcElement;
if( target.className == "textfield" ) {
validator.call( target, e );
}
},
false
);
Use maxlength attribute to limit number of input
maxlength="2"
After settting the above you can use onkeyup event to check the length and change focus
$('#target').keyup(function () {
var maxlength = $(this).attr('maxlength');
if ($(this).val().trim().length == maxlength){
//change focus to next input
//change focus to next input
var inputs = $(this).closest('form').find(':input');
inputs.eq(inputs.index(this) + 1).focus();
}
});