Develop Reference

Textbox that allows values -9999 to 9999

Hello this is what I have right now to allow only numbers and a max of 4 digits. How would I make it so that I can allow a - before the number which would bypass the max 4 digit limit? Currently if I use a - only 3 numbers can be entered after, while I need to make it allow 4 numbers.
// Only Numbers can be Entered
function fNumOnly(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode >= 48 && charCode <= 57) || charCode == 45) {
return true;
}
return false;
}
<input id="txtFahrenheit" type="text" onkeypress="return fNumOnly(event);" maxlength="4" />

Why not use <input type="number"> with min and max values? For example:
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
<div>Enter a number between -9999 and 9999 (green for valid entry, red for invalid entry)</div>
<input type="number" name="num" min="-9999" max="9999" required>

You can check length of value of input using regex.
function fNumOnly(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (
((charCode >= 48 && charCode <= 57) || charCode == 45) &&
evt.target.value.match(/^-?\d{0,3}$/g)
) {
return true;
}
return false;
}
<input id="txtFahrenheit" type="text" onkeypress="return fNumOnly(event);" />
Also you can use type=number and min&max attribute for input instead of checking charCode in function
function fNumOnly(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (evt.target.value.match(/^-?\d{0,3}$/g))
return true;
return false;
}
<input id="txtFahrenheit" type="number" onkeypress="return fNumOnly(event);" min="-9999" max="9999"/>

You can add an event listener to your desired button instead, and then upon firing of that event, run the specified function.
var input = document.getElementById("txtFahrenheit");
input.addEventListener("input", function() {
if (input.value < -9999) {
input.value = -9999;
} else if (input.value > 9999) {
input.value = 9999;
}
});
<input id="txtFahrenheit" type="number" min="-9999" max="9999">
By setting the input type to number, we don't have to have code that checks for the input char. By adding max and min to it, we don't allow a user to use the up and down arrows to reach an invalid range.
The attached code however, double ensures this. If they input anything, it will immediately be reverted to the max and min values.
Without it, someone could manually type in 100000 and it would work.

You could do this:
<input id="txtFahrenheit" type="text" maxlength="4">
Then have the script:
const input = document.getElementById("txtFahrenheit");
input.addEventListener("input", () => {
if(input.value.indexOf("-") != -1) input.maxLength = 5;
else input.maxLength = 4;
});
This will let you type four characters in the input field, unless there is a minus among them, in which case, the max will be five characters.

Try Below:
<input id="txtFahrenheit" type="number" oninput="checkLength(this);" />
<script>
function checkLength(inp)
{
if (inp.value > 0)
{
if (inp.value.length > 4)
{
inp.value = inp.value.slice(0, 4);
}
}
else
{
if (inp.value.length > 5)
{
inp.value = inp.value.slice(0, 5);
}
}
}
</script>

How to Disable Paste option for alphabets and Special Characters but Enabled for Numbers

I Used this code for restricting to type alphabets and characters.
<script type="text/javascript">
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
<asp:TextBox ID="txtCode" runat="server" Width="15%" onkeypress="return isNumber(event)"/>
But I am able to Paste the alphabets and characters in it(Which I don't want).
When I used this code, The Paste Option is disabled but,I cant Paste even Numbers
<asp:TextBox ID="txtCode" runat="server" Width="15%" ondrop="return false;"
onpaste="return false;" onkeypress="return isNumber(event)" />
But I want to paste the Numbers :(,How can I do that ?.

First of all you should use type="number" to have a semantic meaning and form validation like HtML5 in mordern browser, and to get the live functionality in all the browser you can try this:
function isNumber(ev) {
if (ev.type === "paste" || ev.type === "drop") {
var textContent = (ev.type === "paste" ? ev.clipboardData : ev.dataTransfer).getData('text');
return !isNaN(textContent) && textContent.indexOf(".") === -1;
} else if (ev.type === "keydown") {
if (ev.ctrlKey || ev.metaKey) {
return true
};
var keysToAllow = [8, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
return keysToAllow.indexOf(ev.keyCode) > -1;
} else {
return true
}
}
<input type="number" placeholder="paste numbers only" name="" onpaste="return isNumber(event)" onkeydown="return isNumber(event)" ondrop="return isNumber(event)">
Remove the second condition if && pasteContent.indexOf(".")===-1 if you want to allow integer as well as floating point numbers. but allowing floating point number will cause a problem if you already have a floating point number, so it will be invalid number with two "."

Below is a solution using a timeout.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="inputText" onpaste="return isNumber(event);" onkeypress="return isNumber(event)" value="" size="40">
<p id="demo"></p>
<script>
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var element = document.getElementById("inputText");
var initialValue = element.value;
if(evt.type == "paste"){
setTimeout(function() {
var value = element.value;
var pastedText = value.replace(initialValue,"");
if(!isNaN(pastedText)){
element.value = value;
}else{
element.value = initialValue;
}
}, 2);
}
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
</body>
</html>

Allow only letters and spaces and capitalise each word

I need to only allow letters to be typed, and I also need to capitalise the first letter of each word using javascript. I have the first bit working on keypress, I want the second working onblur, but I can't get it to work. It works ok if I use it on its own though. I've tried a bunch of things but I must be missing something small, I just can't figure out what it is.
HTML
<tr>
<td>
<input type="text" name="first_names" onkeypress="return isAlfa(event)" onblur="toTitleCase()">
</td>
<td>
<input type="text" name="last_names" onkeypress="return isAlfa(event)" onblur="toTitleCase()">
</td>
</tr>
JAVASCRIPT
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}
function toTitleCase(str)
{
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
Please assist

You need to reassign the value of the input, e.g. like onblur="this.value = toTitleCase(this.value)":
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}
function toTitleCase(str) {
return str.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
<input type="text" name="first_names" onkeypress="return isAlfa(event)" onblur="this.value = toTitleCase(this.value)">

Backspace is not working in Textarea of My Form on Mozila browser

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 > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
$('input.facebookUrl').keyup(function(){
if (
($(this).val().length > 0) && ($(this).val().substr(0,24) != 'http://www.facebook.com/')
|| ($(this).val() == '')
){
$(this).val('http://www.facebook.com/');
}
});
<table align="center">
<tr>
<td>
<input name="firstname" class="text_area" maxlength=20 placeholder="Name" type="text" onKeyPress="return onlyAlphabets(event,this)" required id="ValidName" value="" />
</td>
<tr>
<td>
<input type="text" onkeypress="return isNumber(event)" id="volpincode" maxlength=7 name="pincode" value="" required placeholder="Pincode" class="text_area">
</td>
<td><input style="width:300px" type="text" onkeypress="return keyup(event)" class="facebookUrl" name="facebook" value="http://www.facebook.com/$facebook"></td>
<td>
<input style="width:30px" disabled="disabled" type="text" name="facebook" value="+91" />
</td>
</tr>
</tr>
</table>
I am trying to validate the Name and Pin code, as such that in the NAME field only the alphabets have to enter not any other characters and In Pincode only numbers should enter. The form is working in Google chrome as fine, but firefox when i enter and try to delete the text in text field, the characters are not getting deleted.

To validate only alphabets for Name use below code:
$(document).on("keydown", "#NametextboxID", function (e) {
if (e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90) || (key == 9))) {
e.preventDefault();
}
}
});
To validate only numbers for Pin use below code:
$(document).on("keydown", "#PinId", function (e) {
if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
e.preventDefault(); // Prevent character input
} else {
var n = e.keyCode;
if (!((n == 8) // backspace
|| (n == 46) // delete
|| (n >= 35 && n <= 40) // arrow keys/home/end
|| (n >= 48 && n <= 57) // numbers on keyboard
|| (n >= 96 && n <= 105)
|| (n == 9)) // number on keypad
) {
e.preventDefault();
// alert("in if");
// Prevent character input
}
}
});

Add one more condition to the "onlyAlphabets function" for the name field.
if (charCode == 8 || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
JS Fiddle Link

allowing only alphabets in text box using java script

I want to allow only alphabets in textbox using JavaScript
I used the code:
var nam=f.nm.value;
if(!isNaN(nam))
region.innerHTML="alphabets only";
It is not working and allows numbers as well. How can i fix this?

<html>
<head>
<title>allwon only alphabets in textbox using JavaScript</title>
<script language="Javascript" type="text/javascript">
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 > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<input type="text" onkeypress="return onlyAlphabets(event,this);" />
</td>
</tr>
</table>
</body>
</html>

just use onkeypress event like below:
<input type="text" name="onlyalphabet" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">

From kosare comments, i have create an demo http://jsbin.com/aTUMeMAV/2/
HTML
<form name="f" onsubmit="return onlyAlphabets()">
<input type="text" name="nm">
<div id="notification"></div>
<input type="submit">
</form>
javascript
function onlyAlphabets() {
var regex = /^[a-zA-Z]*$/;
if (regex.test(document.f.nm.value)) {
//document.getElementById("notification").innerHTML = "Watching.. Everything is Alphabet now";
return true;
} else {
document.getElementById("notification").innerHTML = "Alphabets Only";
return false;
}
}

You can use HTML5 pattern attribute to do this:
<form>
<input type='text' pattern='[A-Za-z\\s]*'/>
</form>
If the user enters an input that conflicts with the pattern, it will show an error dialogue automatically.

You can try:
function onlyAlphabets(e, t) {
return (e.charCode > 64 && e.charCode < 91) || (e.charCode > 96 && e.charCode < 123) || e.charCode == 32;
}

:::::HTML:::::
<input type="text" onkeypress="return lettersValidate(event)" />
Only letters no spaces
::::JS::::::::
// ===================== Allow - Only Letters ===============================================================
function lettersValidate(key) {
var keycode = (key.which) ? key.which : key.keyCode;
if ((keycode > 64 && keycode < 91) || (keycode > 96 && keycode < 123))
{
return true;
}
else
{
return false;
}
}