i want one textbox which only accpet the number, this solution i need without html5 support.
i have textbox inside the custom directive template.
ng-keypress="Validation($event)"
and
in controller of that directive, i wrote like this :
$scope.Validation = function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
}
but it is not working, any idea?
Just add the following line before the return false;:
e.preventDefault();
This will prevent the keypress event propagation and will cancel the user's input.
Related
hi i have this function to allow digits 0-9 but i want to include the negative sign. how would i do that? Thanks.
function allowNumbersOnly(e) {
var code = (e.which) ? e.which : e.keyCode;
if (code > 31 &&(code < 48 || code > 57)) {
e.preventDefault();}
else if (code==109){
e.preventDefault();
}
}
Also see HTML text input allow only numeric input.
Add a test to check if it's the first character and allow "-". Otherwise, run the other tests. e.g.
function allowNumbersOnly(e) {
let len = e.target.value.length;
var code = (e.which) ? e.which : e.keyCode;
if (len == 0 && code == 45) {
return;
}
if (code > 31 && (code < 48 || code > 57)) {
e.preventDefault();
} else if (code == 109) {
e.preventDefault();
}
}
window.onload = function() {
document.querySelector('#i0').addEventListener('keypress', allowNumbersOnly, false);
}
<input id="i0">
However, that only allows entry of "-" as the first and only character, it can't be added later to change say "1" to "-1".
Personally, I find this kind of UI feature very annoying, e.g. it prevents keystrokes to copy and paste values. Just let the user enter whatever they like and deal with it. If it doesn't fit the required criteria, just let the user know with a friendly message and let them fix it.
I have following jQuery script implemented which suppose to restrict input in input form.
<script language="JavaScript">
var inputPlz = $j( "span#spanvertragsnehmer_plz input.plz" );
function attachEventHandlerToInputNumber(input)
{
input.on("keypress", function(key)
{
if ((key.which != 8 && key.which != 0 && (key.which < 48 || key.which > 57)) || inputPlz.val().length > 4)
{
return false;
}
});
}
attachEventHandlerToInputNumber(inputPlz);
</script>
In the following code I can restrict the input but once it goes to 5 digit number I can't edit the number using backspace anymore. Is there anything I missing here ?? Thank you.
This statement || inputPlz.val().length > 4 causes the return false; line to execute whenever the input length is 5+, no matter what key is pressed. Backspace is a key like any other thus you cannot backspace after 5+ digits.
If you want to allow backspaces once 5+ digits have been entered you could change that segment to || (inputPlz.val().length > 4 && key.which != 8))
My current code is like this
$('.textBoxClass').bind('keypress', function (e) {
return (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46 && e.which != 43) ? false : true;
});
Use the jQuery keyup event.
You need to check if event.keyCode is + and if input field already contains +.
If yes, you can prevent the event with event.preventDefault().
Or you can use some third-part plugin like jqueryvalidation and use a regular expression.
Remember to validate the data serverside because javascript validation can be easily bypassed.
I have a textfield in Extjs. This textfield can only contain
Digits 0 - 9
Alphabets a-z or A-Z
Characters like _ (underscore) and - (hyphen)
I want to prevent the user from entering anything apart from these characters. As such I wish to display an error, something like a red underline along with helptext to notify the user as to why the error is there.
Kindly advice as to how to go about preventing the user from entering anything apart from the above characters and also displaying the error message.
Use maskRe property:
An input mask regular expression that will be used to filter
keystrokes (character being typed) that do not match. Note: It does
not filter characters already in the input.
maskRe: /[A-Za-z0-9\-_]/
Working example: https://fiddle.sencha.com/#fiddle/o4b
Something like this. There are a whole load of issues with keypress and keydown on different browsers, but I believe this should work on most/all modern browsers without issue.
var errorDiv = document.getElementById('error'),
testInp = document.getElementById('test');
testInp.addEventListener('keypress', function (evt) {
var code = evt.keyCode || evt.charCode;
if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code === 45 || code === 95) {
errorDiv.classList.add('hidden');
} else {
evt.preventDefault();
errorDiv.classList.remove('hidden');
}
}, false);
testInp.addEventListener('keydown', function (evt) {
var code = evt.keyCode || evt.charCode;
if (code === 8 || code >= 37 && code <= 40|| code === 46) {
errorDiv.classList.add('hidden');
}
}, false);
#error {
color: red;
}
.hidden {
visibility: hidden;
}
<input id="test" type="text" />
<div id="error" class="hidden">As such I wish to display an error, something like a red underline along with helptext to notify the user as to why the error is there.</div>
You can add an event keyup and check the input key value.
For example for a space:
listeners: {
keyup: function(field, e) {
var key = e.getKey();
if (key == 32){
alert("Hey dude, what are you doing?");
}
}
}
Or something else. You can take a look at:
field.addClass("x-form-invalid")
field.markInvalid("Hey dude, what are you doing?");
Hope this helps.
I have this function that only allows number in keypress how can i change this function ou method to call, so when i do ctrl+v verify too the values?
function isNumberKey(evt, obj) {
var containsDot = obj.value.indexOf(".");
var nrDecimals = Decimals(obj.value, ".");
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode == 8 || charCode == 9) {
return true;
} else if (charCode > 31 && (charCode < 48 || charCode > 57)) {
if (charCode == 46 && containsDot < 0) {
return true;
}
return false;
}
if (nrDecimals > 2) {
return false;
}
return true;
}
I call it this way
onkeypress="return isNumberKey(event,this);"
If you only want numbers in your input, you could do something like this:
onkeyup="this.value = this.value.replace(/[^0-9]+/, '');"
This replaces all non-number characters from the value. This does about the same as your whole function does, plus it works with the paste.
You need to change onkeypress to onkeyup.
For the full solution you need to switch to more complex code. As one of the comment below says, you can rightclick->paste aswell. This will not catch that. You need to bind multiple event (keypress, keyup, click are examples of events) to that one input. If you're lucky, focus will catch it (if rightclick blurs it, and after paste it focusses).
you can use jQuery. Change the below code as per your requirement.
$(document).ready(function() {
$("#id")
.bind('copy', function(e) {
alert('copying!');
})
.bind('paste', function(e) {
alert('pasting!');
})
.bind('cut', function(e) {
alert('cut!');
});
});
If you want to use plane javascript. I think below will work, but not sure about the browser compatibility.
<input type="text" onpaste="callFunc()" />