I have one textbox coded like below :
<input name="txttelephone" type="text" maxlength="16" id="txttelephone" class="InputTextBox" onkeypress="return NumbersOnly(event);" required />
And javascript function is like below :
function NumbersOnly(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode != 8) {
if (unicode < 48 || unicode > 57) {
if (unicode == 9)
return true;
else
return false;
}
}
}
Now When I run this in chrome arrow keys working proper but in firefox arrow key is not working. Not getting what is the issue.
Please help me with this.
Thanks,
Dipa
You have to exclude arrow key codes. Try following modification in your code.
function NumbersOnly(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode != 8) {
if (unicode < 48 || unicode > 57) {
if (unicode == 9 || IsArrows(e) )
return true;
else
return false;
}
}
}
function IsArrows (e) {
return (e.keyCode >= 37 && e.keyCode <= 40);
}
Related
I have written jquery for allowing numbers and dash - from being entered
$('.no-special-characters').keydown(function(e){
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 45) {
return true;
} else {
return false;
}
});
It does not work accordingly. It allows only numbers to be accepted.
try this code
$('.no-special-characters').keydown(function(e) {
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 189) {
return true;
} else {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="no-special-characters">
Try this
Updated with backspace support
Allow the keycode of 189
$('.no-special-characters').keydown(function(e) {
var key = e.keyCode|e.which;
console.log(key) //check the key value in your console.log
if (key >= 48 && key <= 57 || key == 45 || key == 189 ||key == 8){
return true;
} else {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="no-special-characters">
Here you go with one more solution
$('.no-special-characters').keydown(function(e){
if ((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 189) {
return true;
} else {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="no-special-characters" type="text" />
Usually combine the keyCode from 48 to 57 & then the next keyCode condition.
Hope this will help you.
e.keyCode = 109 is '-' on numpad
e.keyCode = 189 is '-' in alphabate keybord key on chrome
e.keyCode = 173 is '-' in alphabate keyboard key on firefox & on chrome 173 keycord is Mute On|Off
Source
Maybe this helps you, because using only e.keyCode == 189 (as some answers say) wont work in Firefox.
You can see, what keyCode your key presses return here: Link
Edit: You can also use regular expressions. Then there is no need to add keyCodes for different browsers:
$('.no-special-characters').keypress(function(e){
var txt = String.fromCharCode(e.which)
var pattern = /^[0-9\-]+$/;
if (!(pattern.test(txt) || e.keyCode == 8)){
return false;
}
})
JSFiddle
I have a text field in ASP.NET and i want to allow only alphanumeric and forward slash (/) keys in that. I tried the following code,
function jsCheckInput(e) {
var evt = (e) ? e : window.event;
var key = (evt.keyCode) ? evt.keyCode : evt.which;
if (key != null) {
key = parseInt(key, 10);
if (key < 47 || (key > 57 && key < 65) || (key > 90 && key < 97) || key > 122) {
if (!jsIsUserFriendlyChar(key)) {
return false;
}
}
else {
if (evt.shiftKey) {
return true;
}
}
}
return true;
}
function jsIsUserFriendlyChar(val) {
// Backspace, Tab, Enter, Insert, and Delete
if (val == 8 || val == 9 || val == 13 || val == 45 || val == 46) {
return true;
}
// Ctrl, Alt, CapsLock, Home, End, and Arrows
if ((val > 16 && val < 21) || (val > 34 && val < 41)) {
return true;
}
return false;
}
In the web forms page i added like below,
<asp:TextBox ID="text_value" CssClass="textbox" onkeydown="return jsCheckInput(event);" runat="server"></asp:TextBox>
Here i am able to enter alphabets and numbers but i am not able to enter the value /. I have enabled the shift key so i can give shift + ? to enter the forward slash. Also another problem is when i press shift + any numeric key the special characters there like ! # # $ % ^ & * ( ) ... are also coming in tet field. What am i doing wrong here?
if you want to use Regular Expression. Ignore if you don't
const regex = /^[a-z0-9\/]+$/gi;
const str = `asdasdas/asdfaASDASDA`; //test string
if(regex.test(str )){
console.log('Allowed'+str);
}
Tested here
You don't need shift key to type forward slash. Key code for forward slash(/) is 191. Just add this also in your if condition.
function jsCheckInput(e) {
var evt = (e) ? e : window.event;
var key = (evt.keyCode) ? evt.keyCode : evt.which;
if (key != null) {
key = parseInt(key, 10);
if (key < 47 || (key > 57 && key < 65) || (key > 90 && key < 97) || key > 122 || key != 191) {
if (!jsIsUserFriendlyChar(key)) {
return false;
}
}
}
return true;
}
SOLUTION
Finally found a solution as below,
function jsCheckInput(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode > 46 && charCode < 58))
return true;
else if (jsIsUserFriendlyChar(charCode))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
This code works perfectly!!
I want to remove first space from text field. i have created function which allow only characters.
Here is my html code :
<form:input path="deliveryBoyName" id="deliveryBoyName"
maxlength="100" class="form-control"
onkeypress="return onlyAlphabets(event,this);">
</form:input>
Here is my javascript function :
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if (charCode == 0 || charCode == 8 || charCode == 17 || charCode == 20 || charCode == 32 || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
} }
Now if user first types space then it should remove. starts only from character.
For example :
If user types like " Hello World"
Then it should not allowed.
If user type like "Hello World" then its should allowed. please help me.
Thank you in advance.
JavaScript trim() function can remove white spaces from both the side.
Here is working fiddle -
var str = " Did you find solution Ashish? If yes then tick it.";
alert(str.trim());
I think you want to allow space only when it is not the first character.
This is what you want, i.e. your function removing all the unnecessary code:
function onlyAlphabets(e, t) {
var charCode = e ? e.which : window.event.keyCode;
return (charCode == 0 || charCode == 8 || charCode == 17 || charCode == 20 ||
(t.value.length && charCode == 32) ||
(charCode > 64 && charCode < 91) ||
(charCode > 96 && charCode < 123))
}
I am trying to allow only numbers [0-9] to be typed in a text box. If an alpha or special character is typed, I do not want it to be shown in the text box. Currently my code is as follows:
$('#TEXTBOX').on("keydown", function(event){
var keyCode = event.which;
if(!((keyCode > 47 && keyCode < 58) || (keyCode > 95 && keyCode < 106) || keyCode == 08)){
event.preventDefault();
}
});
I am having a few problems.
This function is still allows special characters [i.e (SHIFT + 1) gives !, (SHIFT + 2) gives #] I do not want these key combinations to allow insert into text box
I am using magic numbers. I would prefer not to use magic numbers and logic but this is the only way I was able to get the input validation to work.... are there any suggestions on other methods?
My main concern is my first problem with the special characters.
$('#TEXTBOX').on("keydown", function(event){
var keyCode = event.which;
var charCode = (event.charCode) ? event.charCode : ((event.keyCode) ? event.keyCode: ((event.which) ? evt.which : 0));
var char = String.fromCharCode(charCode);
var re = new RegExp("[0-9]", "i");
if (!re.test(char))
{
event.preventDefault();
}
});
Use as
$('#TEXTBOX').on("keydown", function(event){
if(event.shiftKey)
return false;
var keyCode = event.which;
if(!((keyCode > 47 && keyCode < 58) || (keyCode > 95 && keyCode < 106) || keyCode == 08)){
event.preventDefault();
}
});
$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
Worked For me (Only Numbers are allowed)
var key = e.charCode || e.keyCode || 0;
alert(key);
if (key < 48 || key > 58)
return false;
I have a textbox and i want to allow users only enter 4 digits as i want to take time from the user, but i am facing the strange problem in condition.
Fiddle Demo
Javascript
function CheckLength(val, key) {
var keycode = (key.which) ? key.which : key.keyCode;
if(!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57))
return false;
if (val.length < 4)
console.log(val);
else
return false;
}
HTML Markup
<input type="text" id="timepick" onkeyup="return CheckLength(this.value,event);" />
Can anyone help me? why this is happening?
Thanks for your precious time.
You could listen for a "keydown" event instead of "keyup" Heres your Fiddle, (i only changed up to down). , or remove the last entered key by resetting the value in the "keyup" event.
document.getElementById("timepick").addEventListener("keyup", function (e) {
var keycode = (e.which) ? e.which : e.keyCode;
if (e.target.value.length <= 4) console.log(e.target.value)
if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) || e.target.value.length > 3)
e.target.value = e.target.value.substr ( 0,4)
});
Like in this Fiddle
Or you could use 2 seperate events, one "keydown" to prevent the input, and a keyup to read the value
document.getElementById("timepick").addEventListener("keydown", function (e) {
var keycode = (e.which) ? e.which : e.keyCode;
if (!(keycode == 8 || keycode == 46) && ((keycode < 48 || keycode > 57) || e.target.value.length > 3) e.preventDefault()
});
document.getElementById("timepick").addEventListener("keyup", function (e) {
if (e.target.value.length == 4) console.log(e.target.value)
});
Like in this Fiddle
Update, regarding your comment
You could, of course use only a "keydown" event, and build the value you want on your own.
document.getElementById("timepick").addEventListener("keydown", function (e) {
var keycode = (e.which) ? e.which : e.keyCode;
if (!(keycode == 8 || keycode == 46) && ((keycode < 48 || keycode > 57) || e.target.value.length > 3)) e.preventDefault()
if (e.target.value.length == 3) console.log(e.target.value + String.fromCharCode(keycode))
});
Like in this Fiddle
Hope this helps you. It prevents more than 4 values and shows the 4 entered into the log (in the fiddle I change the console.log by an alert).
I solved it by storing the 4 values into a variable and if the user enters more than 4 values restore the textbox value with the variable value:
http://fiddle.jshell.net/6czXu/7/
var vals;
function CheckLength(val, key) {
var keycode = (key.which) ? key.which : key.keyCode;
if (val.length < 5){
alert(val);
// Here store the 4 values
vals = val;
if((keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57))
return false;
}
else{
// Here we have more than 4 digits entered so
// we restore the prevously stored into vals
document.getElementById("timepick").value = vals;
return false;
}
}
Use the onkeypress event instead and everything should work fine. onkeyup is to late.
<input type="text" id="timepick" onkeypress="return CheckLength(this.value,event);" />