jquery - Automatic, intelligent correction of input text field to positive integer -
apologies if has been asked before, have not found previous questions ask satisfactorily comprehensively, or answers cover it.
i want client-side javascript (or jquery) solution forces users use whole number in input field. (for quantity of item in shopping basket: when adding items on product page, , when reviewing basket before checkout).
perhaps in order of difficulty, requirements are:
- only accept characters 0-9.
- allow cutting-and-pasting, across browsers , os's, key shortcuts and/or right-click menus etc
- allow entry via other methods (are there other ways number can entered?)
- allow user delete characters before entering in new value (while preventing empty value @ stage, e.g. when losing focus
in short, want designed. have server-side code check validity, want focus on usability.
this procedure have in mind, issues raised potential pitfalls, , on, comprehensively covering use-cases.
the client-side algorithm split 2 3 chunks: validate/filter on keypress, validate/filter on de-focus, validate/filter on submit.
firstly, there native functions in jquery me? if not, how following algorithm sound?
on key press, , on change: remove characters not in range 0-9. check contents consists either of empty string, or parseable positive integer. (this allow cut-and-paste). if not parseable? don't want reinvent wheel in terms of envisaging myriad of use-cases.
on loss of focus or on submit, perform above check. (in identical fashion, except converting empty string zero)
my concerns how affect usability devices such smart tvs, smartphones , tablets, accessibility tools, , else.
in short, question is: are there ways can avoid re-inventing wheel here? has problem been thoroughly solved, , up-to-date, somewhere? blowing whole thing out of proportion?
thanks
your problem 1 faced lot of people, don't know of standard solution same. having said that, guess you're still blowing things out of proportion.(ideally should not change user types, should tell him wrong, not change automatically). now, need use html5 validations using regular expressions. if user enters not satisfy regex, error message displayed next textbox, , shouldn't allowed proceed until solves issue. way, same regex can used handle cases, whole number, non empty textbox etc. eg: /^[+]?([0-9]+)$/ can used positive numbers. can implement same using javascript too.
Comments
Post a Comment