Develop Reference

How to automatically add a dot after the nth character automatically in textarea?

I have to write a textarea in which the user should enter the given latitude in decimal degrees.
For example: 60.45678 or 05.1
What should I do to make a dot appear in the textarea automatically after the second character?
I already have a function to check if the characters are numbers:
<script language=Javascript>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
} </script>
Maybe it can be somehow modified so that it would add a dot and check if the first two numbers are smaller than 90?
<textarea name="LongitudeEW" placeholder="Longitude East/West." onkeypress="return isNumberKey(event)"></textarea>
Thanks for the help :)

Try this
var DECIMAL_REGEXP = /(?<=^.{2}$)/g;
function handleKeyUp(e) {
var target = e.target;
var charCode = e.which || e.keyCode;
if(charCode > 31 && (charCode < 48 || charCode > 57)){
return false;
}
target.value = target.value.replace(DECIMAL_REGEXP, '.');
return true;
}
var DECIMAL_REGEXP = /(?<=^.{2}$)/g;
function handleKeyUp(e) {
var target = e.target;
var charCode = e.which || e.keyCode;
if(charCode > 31 && (charCode < 48 || charCode > 57)){
return false;
}
target.value = target.value.replace(DECIMAL_REGEXP, '.');
return true;
}
<textarea name="LongitudeEW" placeholder="Longitude East/West." onkeypress="return handleKeyUp(event)"></textarea>
In case you want to bind to the elements keypress event vs inlining:
// cache the regexp
var DECIMAL_REGEXP = /(?<=^.{2}$)/g;
// ref the textarea
var textrea = document.getElementById('LongitudeEW');
// bind to the keypress event
textrea.addEventListener('keypress', function(e){
var target = e.target,
charCode = e.which || e.keyCode;
if(charCode > 31 && (charCode < 48 || charCode > 57)){
e.preventDefault();
}
target.value = target.value.replace(DECIMAL_REGEXP, '.');
});
<textarea id="LongitudeEW" name="LongitudeEW" placeholder="Longitude East/West."></textarea>

You can try using this library: https://nosir.github.io/cleave.js/
For example as your requirement. Hope to help, my friend :))
<script src="cleave.js"></script>
<input class="input-element" type="textarea" >
<script>
$(function(){
var cleave = new Cleave('.input-element', {
delimiter: '.',
blocks: [2, 100],
numericOnly: true
});
});
</script>

jquery clash: “right arrow” and “single quote” getting same keycode in keypress

Similar to this question but a bit different
Javascript keycode clash: "right arrow" and "single quote"
He is using javascript while I am using jquery.
I cannot use keydown event. I want to manage it in keypress event only.
I want to allow Right arrow(& other navigation keys) but disallow entering single quote. both are getting keycode 39.
$(document).ready(function () {
$(".InjectionSafe").keypress(InjectionSafe);
});
function InjectionSafe(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
console.log(charCode);
if (charCode === 9 || charCode == 8 || charCode == 46 // TAB , backspace, delet, left arrow and right arrow
|| charCode == 37 ) { //was pressed
return true;
}
//if (!(charCode != 222 && charCode != 188 && charCode != 190 && charCode!=39)) { // ' < >
if (!(charCode != 60 && charCode != 62 && charCode != 39)) { // ' < >
return false;
}
return true;
}
updated fiddle :https://jsfiddle.net/g2g0sbfo/
Type something & use navigation keys.
Update: I can confirm that this issue is only in firefox(My version is 59.0.1). IE, chrome & opera work fine.

I toyed around with Firefox to see what's happening.
Here is what I got :
You can check originalEvent.key to see which key was actually pressed.
If you pressed ', originalEvent.key = "'".
If you pressed the right arrow, originalEvent.key = "ArrowRight".
$(document).on('keypress', e => {
var charCode = e.which ? e.which : e.keyCode;
$('body').html(charCode);
if (charCode == 39) {
if (e.originalEvent.key == 'ArrowRight') { //Right arrow
$('body').append('<p>Right arrow</p>');
} else {
//Single quote
$('body').append('<p>Single quote</p>');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JavaScript: Mobile number validation with numbers and max length

I'm trying to have a JS which has the requirement as below
I have a textbox of type number and whenever i typed inside that textbox should ONLY ALLOW numbers [0-9] and it should NOT ALLOW the length of the numbers entered to be more than 8 digits.
Eg:
12345678 - Allow
1234 - Dont Allow
1234%^ - Dont Allow
My Html:
<input type="number" id="txt_number" maxlength="8" onkeypress="return isNumber(event)">
My JS
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57 ||charCode>=190)) {
return false;
}
return true;
}
Please help me.
Appreciate.
Thanks

please try this
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;
}

$(function () {
$(".numericOnly").bind('keypress', function (e) {
if (e.keyCode == '9' || e.keyCode == '16') {
return;
}
var code;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if (e.which == 46)
return false;
if (code == 8 || code == 46)
return true;
if (code < 48 || code > 57)
return false;
}
);
$(".numericOnly").bind("paste", function (e) {
$("#lblSearchError").text("Phone no must be numeric digit only !!!");
$('#lblSearchError').show('slow').delay(3000).queue(function (n) {
$(this).hide('slow'); n();
});
e.preventDefault();
});
$(".numericOnly").bind('mouseenter', function (e) {
var val = $(this).val();
if (val != '0') {
val = val.replace(/[^0-9]+/g, "")
$(this).val(val);
}
});
});
with this function you can restrict user to enter other than numeric values and user won't be able to past any non-numeric data. this works for me
You can use it by class name or by ID

Use RegEx match:
function checkMonum(){
var input=document.getElementById('txt_number').value;
var state=false;
var re=/^[\d\.]{8}$/;
var output = re.test(input);
if(output==true){
state=true;
}
return state;
}
i change method match with test, you can check in FF. i am on mobile in chrome. Exactly with 8 digits or has period

Javascript to restrict entry to numbers in textbox

I have an MVC form that I want to restrict the entry on some textboxes to numbers only. I found this code that does that, however, it also restricts the use of the numbers on the keypad pad on the right of the keyboard. Any ideas on how to allow the keypad? I am not sure what is causing that to happen.
<script type="text/javascript">
function ValidateNumber(e) {
var evt = (e) ? e : window.event;
var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
};
HTML Razor:
#Html.TextBoxFor(m => m.CustomerSSN, new { #placeholder = "Customer SSN", #type="number" })

Another approach would be to use the HTML 5 input tag that has built in validation.
<input type="number" name="quantity">
www.w3schools.com/html/html_form_input_types.asp

So here is how I solved this...
<script type="text/javascript">
//Allow only numbers entered
$(document).ready(function () {
$("#CustomerSSN").keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});

event key code for ampersand?

I am trying to find the keycode for ampersand and underscore. I should not allow my users to allow to enter ampersands and underscores. I was taking a look at one list, and it mentions 55 as the keycode for both 7 & ampersand, and another list says that 55 is the keycode for 7. So if I return false when my user hits the keycode 55, I am disallowing the user from using 7, which isn't the requirement. How do I find the keycodes for ampersand and underscore?
I just tried with 55, but it only is giving me the alert for 7 not with ampersand!
function noenter(e)
{
evt = e || window.event;
var keyPressed = evt.which || evt.keyCode;
if(keyPressed==13)
{
return false;
}
else if(evt.shiftKey && keyPressed===55)
// else if(keyPressed==59 || keyPressed==38 || keyPressed==58 || keyPressed==95)
{
alert("no special characters");
return false;
}
}

Use the keypress event and test directly for the character as follows. Don't mess with key codes: they will vary between different keyboard types and cultures. Character codes won't.
var el = document.getElementById("your_input");
el.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
if (charStr == "&" || charStr == "_") {
alert(charStr);
return false;
}
};

Check if the shift key is down:
//e = Event
(e.shiftKey && e.keyCode === 55) //returns true if Shift-7 is pressed

ok got it! it is 38! sorry for putting up this question!

I've solved it using the Unicode Key Identifier. Below is my implementation with jQuery:
function parseKey(key) {
return parseInt(key.substring(2), 10);
}
$inputs.bind('keydown', function(e) {
var c=parseKey(e.originalEvent.keyIdentifier);
//allow only numbers and backspace
if ((c<30 || c>39) && e.which!=8)
e.preventDefault();
if (e.which == 13)
$(this).blur();
});