emkaydk / jstepper Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin usable for making a numeric textfield value easy to increase or decrease
License: ISC License
A jQuery plugin usable for making a numeric textfield value easy to increase or decrease
License: ISC License
hi sir i notice on the plugin that it works well but when i type several zeroes the validation not working
ex: 00000.00 and the default value i set 0.00 is not working
please do assist me sir. i love your plugin.
For example:
$('#txtTesting').jStepper({minValue:0, maxValue:23, minLength:1}); // allows "1,1....2,1"
One idea is to only accept the first decimalSeparator.
Hello, I am using jQuery 3.2
Since hours hours always follow the same constant format, is there a attribute I can easily set where people enter their time.
Also, how can check/validate this inside the onchange
inside a textbox?
Thanks
If I use input type number.
I can use the min and max feature but when I type alphabet, it doesn't work.
Researching using this widget as part of a larger timecode editing widget (e.g. 10:23:43.505 would be ten hours, twenty-three minutes, forty-three seconds and 505 milliseconds). I would use three of your widgets (for hours, minutes, and seconds inputs) and use textnodes for the colons between the hours and minutes inputs.
When the user is focused on the hour field and hit ":", I want to change focus to the minutes field. Suggestions for how to handle this case? It looks like your plugin does not provide a hook for this use case (which would be completely understandable). Just looking for guidance.
try paste code below in stript field here http://jstepper.emkay.dk/ and test it
$('#txtTesting').jStepper({minValue:0, maxValue:23, minLength:2, onStep: testfunction});
function testfunction(objTextField, bDirection, bLimitReached) {
if (bDirection) {
// Was increased
} else {
// Was decreased
}
if (bLimitReached) {
// A limit was reached
} else {
// A limit was not reached
}
alert(objTextField.val());
}
Hello!
I'm about to apply your plugin to my project but I found an issue that if I input some number and then input many dashes then the dashes still remain in the text field. (Ex: 54--------------53453).
The snippet of code I am using is:
$('#MaxEntries').jStepper({ minValue: 1, minLength: 1, allowDecimals: false, disableNonNumeric: true });
Please investigate and fix it.
Thanks and best regards,
Diane
I am using jquery jstepper 1.4.0 and updated to 1.5.3. After updating below functionality is not working.
$('#txtStudentNumber').jStepper({ minValue: 1, maxValue: 99999 });
When textbox is empty its keeping textbox value as 1 but my submit button is still disabled. I am using knockout for button enable/disable.
this.studentNumber = ko.observable($('#txtStudentNumber').val());
When this.studentNumber().trim().length == 0 then I am making the button disabled. But with the jstepper library update textbox is keeping minimum value when textbox is empty but my button is getting disabled. With older version it will not keep minimum value when its empty it used to keep minimum value when it's entered less than minimum value.
My QA team has written automation script to run this workflow, now its failing. They are clearing the textbox and entering some random number in textbox but after entering random number button is still disabled mode so test is failing.
When checking if a field already has jStepper initialized it would make it easier if the plugin had a built-in way of tagging the field with a class when initializing.
This class can be used for both checking if it's initialized but also to apply custom styling to a jStepper'ed field.
Default should probably be the current way: No class is added. And then you'd have to explicitly set a class name to add if you want the plugin to do this.
When the minimum value is of 500 and a user wants to input 2000 the text box value changes to 500 immediately.
Issue found at
http://stackoverflow.com/questions/39995788/jquery-jstepper-time-delay-on-key-up
$('#txtTesting').jStepper({minValue:0, maxValue:23.999, minLength:2, minDecimals:3, maxDecimals: 3, decimalSeparator: '.'});
Enter value 0.999, then decrement one step.
If you look at the return value in AddOrSubtractTwoFloats for this operation, you will note it results in a NaN. This is because you are trying to cast
Number( ".0-1" )
It seems this function did not account for negative numbers properly.
Using this: $('#txtTesting').jStepper({minValue:23, maxValue:230, minLength:3});
User intends to type 100.
They press 1. The stepper automatically jumps to 23?
Are there any ways to control this behavior and allow the user to type 100? Thank you.
Can I dynamically change the min and max values after instantiation? Could you provide an example?
hi everyone
im using this plugin but there a bug when i reinitialize it on the same id it will not get my new
minValue and maxValue
here my code
$("#empid0").on('change',function(){
var td_count = $(this).attr("cnt");
//var tempid=$(this).attr("tempid");
//var empno=$("#empid"+td_count+" option:selected").attr("cc");
var empname=$("#empid"+td_count+" option:selected").attr("e_name");
var company_code=$("#empid"+td_count+" option:selected").attr("cc");
var branch_code=$("#empid"+td_count+" option:selected").attr("bc");
//
//$("#empid"+td_count).val(empno);
$("#empname"+td_count).val(empname);
$("#empname"+td_count).attr("title",empname);
$("#cc"+td_count).val(company_code);
$("#bc"+td_count).val(branch_code);
});
//element menu append to element name etc..
$("#element_name0").on('change',function(){
//console.log("sss");
var td_count =$(this).attr('cnt');
var treid=$("#element_name"+td_count+" option:selected").attr("element-id");
var is_special=$("#element_name"+td_count+" option:selected").attr("is_special");
var etxt=$(this).val();
//alert("1");
//var etypetxt=$(this).attr("element_menu_type");
//alert(etxt +" || "+ etypetxt + "||" + treid);
///////////////////////////////////////
//insert initial data on main table. //
///////////////////////////////////////
//$("#element_name"+td_count).val(etxt).trigger('change');
$("#element_name"+td_count).attr("title",etxt);
$("#element_name"+td_count).attr("element-id",treid);
$("#element_id"+td_count).val(treid);
$("#element-btn"+td_count).attr("element-id",treid);
$( "#element-sbtn"+td_count ).attr("element-id",treid);
//$("#type"+td_count).val(etypetxt);
//alert(etxt);
//return false;
if(is_special=="1"){
showEntryModalValuesException(td_count,etxt,treid);
} else {
showEntryModalValues(td_count,etxt,treid);
}
});
function showEntryModalValues(count,text,teid){
var count = count;//$(button).attr('cnt');
$.ajax({
url: base_url+"/entry_modal",
type: 'POST',
dataType: 'json',
data: {
element_id: teid,
element_name : text,
},
headers: {
'X-CSRF-TOKEN': $("#token").val(),
},
beforeSend: function(data){
loader.showPleaseWait();
//reset values....
$("#amount"+count).val("");
$("#amount"+count).attr('readonly',true);
$("#hours"+count).val("");
$("#hours"+count).attr('readonly',true);
$("#days"+count).val("");
$("#days"+count).attr('readonly',true);
$("#adjustment_date"+count).val("");
$("#element_label"+count).val("");
for ( var i = 0, l = 13; i <= l; i++ ) {
$("element-ent"+i+"-"+count).val("");
}
//$("#adjustment_date"+count).attr('readonly',true);
//$("#adjustment_date"+count).removeClass('adjustment_date');
//$("#adjustment_date"+count).bootstrapDP("remove");
},
complete: function(data) {
//called when complete
loader.hidePleaseWait();
},
success: function(response) {
//console.log(response);
// /data = jQuery.parseJSON(data);
if(response.data!=''){
//$.each(data,function(index,value){
$.each(response.data,function(index1,value1){
//process fields base on count and values return....
//console.log(value1);
if(value1.base_name=="Pay Value" && value1.user_enterable_flag=='Y'){
$("#amount"+count).val();
$("#element_label"+count).val(value1.base_name);
$("#amount"+count).attr('readonly',false);
if(value1.min=='' || value1.min==null) { value1.min=0 } else { value1.min=parseInt(value1.min) }
if(value1.max=='' || value1.max==null) { value1.max=0 } else { value1.max=parseInt(value1.max) }
$("#amount"+count).jStepper({
minValue:value1.min,
maxValue:value1.max,
//defaultValue:0,
allowDecimals:true,
minDecimals:2,
maxDecimals:2,
});
} else if(value1.base_name=="Amount" && value1.user_enterable_flag=='Y'){
$("#amount"+count).val();
$("#element_label"+count).val(value1.base_name);
$("#amount"+count).attr('readonly',false);
if(value1.min=='' || value1.min==null) { value1.min=0 } else { value1.min=parseInt(value1.min) }
if(value1.max=='' || value1.max==null) { value1.max=0 } else { value1.max=parseInt(value1.max) }
$("#amount"+count).jStepper({
minValue:value1.min,
maxValue:value1.max,
//defaultValue:0,
allowDecimals:true,
minDecimals:2,
maxDecimals:2,
});
} else if(value1.base_name=="Hours" && value1.user_enterable_flag=='Y'){
$("#hours"+count).val();
$("#hours"+count).attr('readonly',false);
if(value1.min=='' || value1.min==null) { value1.min=0} else { }//value1.min=parseFloat(value1.min) }
if(value1.max=='' || value1.max==null) { value1.max=0 } else { }//value1.max=parseFloat(value1.max) }
//alert(value1.min+" X "+value1.max);
$("#hours"+count).jStepper({
minValue:value1.min,
maxValue:value1.max,
allowDecimals:true,
//defaultValue:0,
//overflowMode:'ignore',
minDecimals:2,
maxDecimals:2,
});
} else if(value1.base_name=="Days" && value1.user_enterable_flag=='Y'){
$("#days"+count).val();
$("#days"+count).attr('readonly',false);
if(value1.min=='' || value1.min==null) { value1.min=0 } else { value1.min=parseInt(value1.min) }
if(value1.max=='' || value1.max==null) { value1.max=0 } else { value1.max=parseInt(value1.max) }
//alert(value1.min+" XXX "+value1.max);
/* $("#days"+count).removeAttr("id");
$("#days"+count).removeAttr("id","days"+count); */
$("#days"+count).jStepper({
minValue:value1.min,
maxValue:value1.max,
//defaultValue:0,
//overflowMode:'ignore',
//minDecimals:2
});
} else if(value1.base_name=="Effective Date" && value1.user_enterable_flag=='Y'){
$("#effective_date"+count).val();
$("#effective_date"+count).attr('readonly',false);
//$("#adjustment_date"+count).addClass('adjustment_date');
$("#effective_date"+count).bootstrapDP({
format: "mm/dd/yyyy",
//viewMode: "months",
//minViewMode: "months"
});
}
});
//});
}
hideModal("large");
/* hideModal("large");
showModal("medium",data);
$("#modal-entry-back").attr("entry-count",count);*/
},
error: function(data) {
// called when there is an error....
loader.hidePleaseWait();
hideModal("large");
}
});
}
i have issue when i type 1 it will automatically fill up the min range but in the reality i want to type 12....
i try
disableAutocomplete:true,
overflowMode:'ignore'
but issue still exist ... im using chrome please sir reply
tia
Create a more visible and official link to the github project on the documentation site.
When someone by accident comes to the site at /default.aspx, they should be redirected to just / to avoid duplicate content issues.
Is it possible to prevent entry that overflows minLength from resenting the control to maxValue?
In a scenario like this:
Stepper({minValue:1, maxValue:999, minLength:3});
I can see a user entering say "1111" when they meant to type "111" and saving without noticing and they've saved a "999" instead.
Would be nice if the value just stops at "111" if they go past the allowed length.
Thoughts?
In this example:
$('#txtTesting').jStepper({minValue:0, maxValue:23, minLength:2, minDecimals:3, maxDecimals:3, decimalSeparator:'.'});
If I enter 24, the textfield is automatically reverted to 23 -- super!
But I expected it to revert to 23.000
Also, if I enter 2 and blur focus on the textfield, it remains 2. I expected it to change to 02.000
If I set maxValue to 100 and overflowMode to 'ignore', supposedly when I type 111, it will revert to 11 but the value changes to 100 (maxValue). Is it by design?
sir how to disabled the mousewheel plugin on your plugin ......
im having issues that the mousewheel work when the input is on readonly mode
TIA
Hello
I came across your website today and thought it's a good plugin for my purposes. one thing though, if you type a dash (-) character it will be excluded after keyPress, but if you input some digits and then input a dash character, it will remain in the input field.
Maybe I'm using it wrong, if so please point out my mistake. If this is a bug, I would appreciate it being fixed in the next release.
Thanks in advance
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.