Can someone show me some example for restricting user input (on input tag) in Javascript?
Something that when we set the input (type="text") to only accept numeric, so it will ignore any other input except for numeric...
I think it's handy for number input (such as zip, credit card, money, value, score, date etc...), and if you can please show me how to create input with pattern, something like:
Please Input Date:
|-----------------|
| / / |
|-----------------|
PS:
I heard WebForms 2.0 will support this in the future... (Acid 3 compliant browser?)
input type="date"
input type="time"
input type="number"
input type="money"
But it was only news from future :D
This might help you.
http://www.w3schools.com/jsref/event_onkeydown.asp
<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
var numcheck;
if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
numcheck = /\d/;
return !numcheck.test(keychar);
}
</script>
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</body>
</html>
This question has already an accepted answer, but I think there is a better solution to this. You don't have to implement that yourself on keydown etc., there are libraries for that. They call the technique you describe "input masks". Check out this jQuery plugin it does exactly what you want.
You can use specific libs like jQuery Validate (or whatever your JS framework offers) on form submit. The other solution is to control the value on the keyUp & blur events but it can become quite messy to decide what to do with ill-formated entry (especially when the format is a bit complex -- ie not just undesired characters). So, all in all, I'd recommend client-side control on submit.
Related
Does anyone know if it's possible to add a plus sign in a html input type=number field? I have a scenario whereby users need to enter a modifier value which is either +1 to +10 or -1 to -10. I want to make it very explicit to the user that their inputted value increments the resulting value. therefore it would be great if a + sign is prepended to a positive inputted value.
I'm using this input in an Angular2 reactive form with bootstrap styling. so an Angular2 directive, a boostrap style or even a jquery solution are welcome
What I've seen so far is about adding currency symbols inside the form control or about adding + and minus buttons to increment and decrement the value. But that's not what I want, so I doubt if this is possible at all.
I don't think it is possible to manipulate the input.
The default behavior is "-" for negative and no sign for positive numbers.
Even if you checked some custom UI frameworks like:
JQuery UI, Bootstrap, Angular Material ... you will not get the wished behavior.
I guess the only solution for this is to write your own custom code.
Two scenarios are possible:
1- An input with Text and the manipulating will be done in Javascript.
2- Create a pipe in angular2 and give it to the element which I think is much easier than the first one.
No it's not possible. The number field only accepts -, 0-9 and e to be entered. As a workaround you could place the + in the HTML before the input, eg:
+ <input type="number" />
Alternatively you could use a standard type="text" input, but that would mean creating your own validation logic which would make the code much more complex.
I hope this will help on you guys!!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).on('keypress','#input',function (e) {
var keyCode = e.which;
if ($(this).val().trim().charAt(0) == "\u002B") {
if ( keyCode == 43 ) {
return false;
}
}
else{
for (var i = 1; i < $(this).val().length+1; i++) {
if(i!=0){
if ( keyCode == 43 ) {
return false;
}
}
}
}
});
$(document).on('input', '#input', function() {
this.value = this.value.replace(/[^+{1}|^0-9]/g,'');
});
</script>
I want to prevent the use of "," and ";" on an input field with Jquery. I have been trying this solution so far:
HTML :
<input name="txt_correu-e" type="text" id="gestio_usuaris_editaCompta_txt_correu-e" size="50" maxlength="50" class="">
JQUERY:
$('#gestio_usuaris_editaCompta_txt_correu-e').keypress(function (e) {
var filter = /([,;])/;
var campo = $("#gestio_usuaris_editaCompta_txt_correu-e").val();
if (filter.test(campo)) {
e.preventDefault();
}
});
But is not working for me since the input still print the character and then won't let me continue writting in the input. I just want the input to not show those characters but let me continue writting the email adress.
To prevent the user to type , and ;, you can simply do :
$("#target").keypress(function( event ) {
if ( event.which == 44 || event.which == 59 ) {
event.preventDefault();
}
// other instructions
});
Edit :
To validate an email address, you can use :
function is_valid_email(email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
which you can call in any needed event ( keyup, ... ) on your text field.
You can also use the HTML5 email input :
<form>
E-mail: <input type="email" name="email">
</form>
Hope that can help.
Like I said in my comment, there's no need to use jQuery or JavaScript to do this, and restricting an input through the keyPress event is not a good practice, since anyone can copy and paste the content (not even with "evil" intentions).
The following solution would allow any characters except for "," and ";". Keep in mind this is not enough to ensure an email address is valid, of course.
<form>
<input type="text" pattern="^[^,;]*$" required/>
<input type="submit">
</form>
http://jsfiddle.net/parvmck7/
Let me know if you have doubts.
UPDATE: I didn't realise you needed this to be compatible with IE8. If this is the case, you can try with any of the HTML5 Polyfills (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms). Otherwise, JavaScript will be.
$("#target").on('keyup click blur',function( event ) {
var regex = new RegExp('^([A-Z0-9_.+-])+\#(([A-Z0-9-])+\.)+([A-Z0-9]{2,4})+$/', 'i');
if(!regex.exec($(this).val())){
$(this).val("");
event.preventDefault();
});
In order to avoid the insertion of unwanted characters you should listen to keyup event(keyboard), click event( to prevent right click and paste ;:-containing text) and blur event(if the input has been selected via TAB key in order to paste ;:-containing text).
For other mail-validation polices pls see regular-expressions.info
I couldn't find any solution for selecting a range of characters in a <input type="number"> field.
Is it possible?
EDIT: I'm sorry I didn't mention it. By "range", I meant setSelectionRange().
You really should not be asking questions like that here.
With a simple search you could have figured it out.
I will answer it for you however and also assume you mean 'Number' instead of 'Characters'.
You also have to take into account that this is HTML5 and can have browser compatibility issues and you will need to add a polyfill for older browsers.
You can also use step = "any" to specify the value granularity of the value.
<input type="number" name="quantity" min="1" max="5">
Further to the response from #Scor3keeper if you want to handle this yourself rather than relying on the browser's implementation of min/max you could do something like this:
<script>
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 100) input.value = 100;
}
</script>
Then declare the input box like this:
<input type="text" onchange="handleChange(this);" />
This is slightly more robust than modern browser's implementation which allows you to paste or type numbers out of range. However the browser implementation does give the user validation alerts.
Is there a possiblity to force an iOS-device to show the numeric keyboard while using a custom pattern as input type?
my input pattern:
<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price"
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />
I want to type a currency value like '14.99' and show up a keyboard with access to numbers on the iOS device
<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[\d]*' />
are all missing the decimal sign and/or are not validating as number when adding a decimal sign. An alternative way could be a javascript function which is creating the decimal sign on the right place, like pressing 1->2->9->9 in this order creates on keypress() 0.01->0.12->1.29->12.99,
but this requires the input field to be type='text' --> obvious problem here is that the text keyboard is showed when focussing the input field.
How can I solve this issue?
EDIT
Environment:
JQM 1.3.2
jquery 1.8.2
For now, JavaScript is the only solution. Here's the simplest way to do it (using jQuery):
HTML
<input type="text">
JavaScript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
The idea is simple. The input starts off and ends up with type="text", but it briefly becomes type="number" on the touchstart event. This causes the correct iOS keyboard to appear. As soon as the user begins to enter any input or leave the field, the input becomes type="text" once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input that has already been filled out, the input will be lost (if it doesn't validate). This means the user won't be able to go back and edit previous fields. In my case, this isn't all that bad because the user may want to use the calculator over and over again with different values, so automatically deleting the input will save them a few steps. However, this may not be ideal in all cases.
It looks like Mobile Safari supports the new HTML5 input type attributes of email, number, search, tel, and url. These will switch the keyboard that is displayed. See the type attribute.
So for example, you could do this:
<input type="number" />
And when the input box has focus, the number keyboard is shown (as if the user had the full keyboard and hit the "123" button.
If you really only want numbers, you could specify:
<input type="tel" />
And then the user would get the phone number dialing keypad.
I know this works with Mobile Safari -- I only assume it will work with UIWebView.
http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/
I made this little snippet to achieve what you want and I've tested it on iPhone 5 v7.0.3
I used e.which to read CharCode entered and then push it into an array (before) which represents digits before decimal mark and another array (after) to move values from (before) array past the decimal mark.
It might look complicated, due to my humble programming skills.
1) Code demo - 2) Currency conversion demo
HTML:
<input type="tel" id="number" />
JS
Variables and functions:
// declare variables
var i = 0,
before = [],
after = [],
value = [],
number = '';
// reset all values
function resetVal() {
i = 0;
before = [];
after = [];
value = [];
number = '';
$("#number").val("");
$(".amount").html("");
}
// add thousand separater
function addComma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Main code:
// listen to keyup event
$("#number").on("keyup", function (e, v) {
// accept numbers only (0-9)
if ((e.which >= 48) && (e.which <= 57)) {
// convert CharCode into a number
number = String.fromCharCode(e.which);
// hide value in input
$(this).val("");
// main array which holds all numbers
value.push(number);
// array of numbers before decimal mark
before.push(value[i]);
// move numbers past decimal mark
if (i > 1) {
after.push(value[i - 2]);
before.splice(0, 1);
}
// final value
var val_final = after.join("") + "." + before.join("");
// show value separated by comma(s)
$(this).val(addComma(val_final));
// update counter
i++;
// for demo
$(".amount").html(" " + $(this).val());
} else {
// reset values
resetVal();
}
});
Reset:
// clear arrays once clear btn is pressed
$(".ui-input-text .ui-input-clear").on("click", function () {
resetVal();
});
Result:
I think that you can use the same approach that I suggested to Ranjan.
Using a textfield like a buffer. First you need to detect when the keyboard appears and check if the first responder is the webview. Then you become a textview as the first responder.
When you are setting the text inside the input of the webview, you can add some logic to validate the number.
Here is a link of my example project with the solution, in your case you don't need change the inputView. But the approach is the same, use a Man in the middle.
Cant comment on https://stackoverflow.com/a/19998430/6437391 so posting as a separate answer...
This is the same idea as https://stackoverflow.com/a/19998430/6437391 but instead of switching the type, its the pattern that's switched.
This has the effect of not clearing the value on the textfield on focus when value does not match numeric format, for example, if the value has separators( 1,234.56 ).
$('input[type="text"]').on('touchstart', function() {
$(this).attr('pattern', '[0-9]*');
});
$('input[type="text"]').on('focus', function() {
$(this).attr('pattern', actualpattern);
});
I'm trying to deal with a frustrating Internet Explorer issue that prevents me from using jquery-validate in conjunction with jquery-placeholder. In short, the validation does not work on fields with type=password.
More info Here
One possible fix I came up with is to modify my passwords to be type=text, but this of course displays the passwords in plain-text rather than as *******.
Is there any clever html/js/css trick to make text fields display as though they were passwords?
So potentially you could have something set up like this.
Have a hidden input type that simulates the password values
So I guess jquery wise it would be
//everytime the password changes hidden changes with it.
$('#passwordId').change(function() {
$('#hiddenID').val() = $('#passwordId').val();
});
html:
<input type="password" id="passwordId" />
<input type="hidden" id="hiddenID" />
So this would allow you to validate the hidden input which would be the same value as the password.
First "hack" I can think of would be to add a "data-changed" attribute to the input="password" field, then attach an "onchange" event to the password field that sets "data-changed" == true, so that way you can validate if the value "password" was in fact entered by the user (data-changed == true) or if it is being submitted by the placeholder plugin itself.
While these answers were coming in, I had an epiphany of my own. At first glance, it appears to work. I'll check out the other answers and accept whichever approach looks like it will work best and be the least "hacky".
I came up with this approach when I discovered that the problem only exists when the field is empty (still has placeholder text), and as such, only will not pass "required" validation. My fix is to change it to type=password when content is entered.
My approach:
$('#password, #password_confirm').keyup(function(){
if ($(this).attr('type') === 'text') {
if ($(this).val().length > 0) {
$(this).attr('type', 'password');
}
} else if ($(this).val() == "") {
$(this).attr('type', 'text');
}
});