Scroll if any alphanumeric character or symbol is pressed - javascript

I am writing a JS code that scrolls a container is any alphanumeric character or symbol is pressed.
This is what I came up with:
var $q = $('input#q');
$q.on('keydown', function (e) {
var reMatch = /[!-~]/.exec(e.which);
if (typeof reMatch != 'null' && reMatch.length > 0) {
$('#container').animate({scrollTop: 410}, 500);
$(this).off('keydown');
}
}).focus();
But this executes for all keys like shift, tab, enter etc ...
What's wrong with the code?

e.which gives a numeric representation of the key pressed. The number keys are represented by 48-57 (or 96-105 on the keypad) while letters are represented by 65-90
Try this:
var $q = $('input#q');
$q.on('keydown', function (e) {
var val = e.which;
var num = (val > 47 && val < 58 || val > 95 && val < 106);
var letter = (val > 64 && val < 91);
if (num || letter) {
$('#container').animate({scrollTop: 410}, 500);
$(this).off('keydown');
}
}).focus();
You could do this for it to work with anything that creates an input in the text field:
var $q = $('input#q');
$q.on('input', function (e) {
$('#container').animate({
scrollTop: 410
}, 500);
$(this).off('input');
}).focus();
but this will not work for IE versions less than 9. Although if you look, you can find shims. Here is an example
You could do this, but it would not scroll immediately if the user is holding a key down for a long time (until the user releases the key).
var $q = $('input#q');
var qval = $q.val()
$q.on('keyup', function (e) {
if(qval != $q.val()) {
$('#container').animate({scrollTop: 410}, 500);
$(this).off('keyup');
}
}).focus();

Related

JavaScript - Accepting only certain values for decimals

I have a number field to which I need to apply certain conditions with pure JS or jQuery:
Max 30
Min -30
Only 2 digits after the point, example 2.25
So possible values are like this (2.00 / 2.25 / 2.50/ 2.75 / 3.00...)
I managed to do so unless for the last condition that should accept only values .00 or .25 or .50 or .75
Here is my code:
var t_myField = false;
var myField_min = -30;
var myField_max = 30;
$('#myField').focus(function ()
{
var $this = $(this)
t_myField = setInterval(
function ()
{
if (($this.val() < myField_min || $this.val() > myField_max) && $this.val().length != 0)
{
if ($this.val() < myField_min)
{
$this.val(myField_min)
}
if ($this.val() > myField_max)
{
$this.val(myField_max)
}
}
}, 50)
});
$('#myField').on("keyup", function (e)
{
// Replacer , by .
$(this).val($(this).val().replace(/,/g, '.'));
// Allow only float numeric values (positif & negatif)
var self = $(this);
self.val(self.val().replace(/[^0-9\.-]/g, ''));
if (e.which != 46 && e.which != 45 && e.which != 46 && !(e.which >= 48 && e.which <= 57))
{
e.preventDefault();
}
// Allow max 2 digits after decimals for certain fields
match = (/(\d{0,2})[^.]*((?:\.\d{0,2})?)/g).exec(this.value.replace(/[^\d.]/g, ''));
this.value = match[1] + match[2];
});
<input type="text" name="myField" id="myField" class="myField">
JSFIDDLE => https://jsfiddle.net/Cartha/vq65Lypj/5/
[EDIT]
Control should be on keyup. This is why I can't use html5 attributes like min/max/step...
You can make use of % operator like x % 0.25 == 0 ? true : false
let myField = document.getElementById('myField');
myField.addEventListener('keypress', onlyNumbers,{passive: false});
myField.addEventListener('change', checkInput);
function onlyNumbers(e) {
if (!isNumberKey(e)) {
e.preventDefault();
}
}
function isNumberKey(e) {
return (e.which <= 31 || (e.which >= 48 && e.which <= 57) || e.which === 45 || e.which === 46);
}
function checkInput(e) {
let x = parseFloat(e.target.value);
if (!isNaN(x)) {
if (x > 30) {
x = 30;
} else if (x < -30) {
x = -30;
} else if (x % 0.25 !== 0) {
x = Math.round(x / 0.25) * 0.25;
}
e.target.value = x.toFixed(2);
}
}
This will allow only numbers with 0.25 steps.
Digit-only algorithm has been improved to completely prevent other type of input to be displayed (your code shows the forbidden input and then erases it).
This is the basic idea, a lot of other improvements can be made. For example, to always show two decimals (EX. 2.00 instead of 2), make an animation, etc. Currently, the check is set to happen after focus ends.
NOTE: Little extra improvements made in last edit.
JS Fiddle (I don't know how to embed it to the answer)
I would recommend creating a web component here. I'll show you the basic setup for a customized built-in with a component that already works and does not involve fumbling with $(document).ready() or DOMContentLoaded:
class DecimalInput extends HTMLInputElement {
constructor() {
super();
this.addEventListener('input', (e) => {
const val = parseFloat(this.value),
min = parseFloat(this.min),
max = parseFloat(this.max),
step = parseFloat(this.step);
if (val%step !== 0) {
this.value = Math.round(val/step) * step
}
if (val > max) {
this.value = max
}
if (val < min) {
this.value = min
}
this.value = Number(this.value).toFixed(2, 10);
})
}
}
customElements.define('decimal-input', DecimalInput, { extends: 'input' })
<input type="number" is="decimal-input" min="-30" max="30" step="0.25" value="0" />
This component is already quite close to your requirements. Use it to do our own refinements based on this.

what are key values for special characters?

function alphaOnly(event) {
var key = event.keyCode;
return ((key >= 8 && key <= 47) || (key >= 65 && key <= 222));
};
My function is not able to print # # $ % & ! * ( )
I could not find key codes for the above symbols. Please help me to accept these characters.
You can use regular expression instead on checking ascii values :
<script type="text/javascript">
function alphaOnly() {
var isValid = false;
var regex = /^[a-zA-Z%*#]*$/;
isValid = regex.test($("#field").val());
return isValid;
}
</script>

Validate date on keypress not working

This is the regex :
pattern =/^([0-9]{2})-([0-9]{2})-([0-9]{4})$/;
Hi guys, I found a simple regex for date format , no checking for leap year, but on my fiddle I can still input other invalid characters.
Please see my FIDDLE.
http://jsbin.com/ruhaxo/9/edit
Your code made me a little uncomfortable, so I tried to write this more simply so that it would be easier to read, you can pull out the part that you need, which I really think is just the event.preventDefault() when there is a match. Just to expand, as well: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes you are looking for char codes not the literal numbers.
$('input').on('keypress', function (e) {
var leng = $(this).val().length;
if (window.event) {
code = e.keyCode;
}else {
code = e.which;
};
var allowedCharacters = [49,50,51,52,53,54,55,56,57,48,45];
var isValidInput = false;
for (var i = allowedCharacters.length - 1; i >= 0; i--) {
if(allowedCharacters[i] == code){
isValidInput = true;
}
};
if(isValidInput === false || /* Can only input 1,2,3,4,5,6,7,8,9 or - */
(code == 45 && (leng < 2 || leng > 5 || leng == 3 || leng == 4)) ||
((leng == 2 || leng == 5) && code !== 45) || /* only can hit a - for 3rd pos. */
leng == 10 ) /* only want 10 characters "12-45-7890" */
{
event.preventDefault();
return;
}
});
You can also do this with an object, rather than an Array. Which is a little easier to read:
$('input').on('keypress', function (e) {
var leng = $(this).val().length;
if (window.event) {
code = e.keyCode;
}else {
code = e.which;
};
var allowedCharacters = {49:1,50:2,51:3,52:4,53:5,54:6,55:7,56:8,57:9,48:0,45:'-'}; /* KeyCodes for 1,2,3,4,5,6,7,8,9,- */
if(typeof allowedCharacters[code] === 'undefined'|| /* Can only input 1,2,3,4,5,6,7,8,9 or - */
(code == 45 && (leng < 2 || leng > 5 || leng == 3 || leng == 4)) ||
((leng == 2 || leng == 5) && code !== 45) || /* only can hit a - for 3rd pos. */
leng == 10 ) /* only want 10 characters "12-45-7890" */
{
event.preventDefault();
return;
}
});
EDITED:
Please be careful with this, I haven't fully tested this, but I edited the regex from the post mentioned, if you have this in addition to one of the other choices above, (this happens on keyup after the other checks have been made) this would validate the date in the format mm-dd-yyyy please check that it works properly, I tried 02-29-2008, the first leap year I could think of, and it worked, but I would recommend testing it more since it has been modified.
$('input').on('keyup',function(e){
/* From:
http://stackoverflow.com/questions/17503043/javascript-regular-expression-to-validate-date-in-mm-dd-yyyy-format
and
http://jsfiddle.net/LSsMc/
*/
var thisVal = $(this).val();
var leng = thisVal.length;
var reg = new RegExp(/^(((0[13578]|1[02])\-(0[1-9]|[12]\d|3[01])\-((19|[2-9]\d)\d{2}))|((0[13456789]|1[012])\-(0[1-9]|[12]\d|30)\-((19|[2-9]\d)\d{2}))|(02\-(0[1-9]|1\d|2[0-8])\-((19|[2-9]\d)\d{2}))|(02\-29\-((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g);
if(leng == 10){
if(reg.test(thisVal)){
console.log('Valid Date');
}else {
event.preventDefault();
return;
}
}
});

jQuery event.keyCode NOT detecting alphanumerics

I have written a script to detect what key the user has clicked and act based on the key (if its alphanumeric) but it is not working so far and has no errors.
jQuery(document).ready(function() {
$("#my_field").keydown(function(event) {
var additional = new Array(8,9,13,27,35,36,37,38,39,46);
var numbers = new Array(48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105,144);
var letters = new Array(65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90);
var AllowedKeyCode =
(jQuery.inArray(event.keyCode, additional) >= 0)
||
(jQuery.inArray(event.keyCode, letters) >= 0)
||
((!event.shiftKey) && (jQuery.inArray(event.keyCode, numbers) >= 0))
||
((event.ctrlKey) && (event.keyCode == 65 || event.keyCode == 67 || event.keyCode == 86));
if (AllowedKeyCode === false) {event.preventDefault();}
});
});
Would really appreciate any help.
The ideal syntax for an array in Javascript is:
var additional = [8,9,13,27,35,36,37,38,39,46];
As opposed to:
var additional = new Array(8,9,13,27,35,36,37,38,39,46);
The issue might be that you have no return action. It is quite tricky to see in what you have posted.
Try changing:
event.preventDefault();
to
return false;

JavaScript on IE and Chrome? (It works on Firefox)

function ord(string) {
var str = string + '',
code = str.charCodeAt(0);
if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F to treat high private surrogates as single characters)
var hi = code;
if (str.length === 1) {
return code; // This is just a high surrogate with no following low surrogate, so we return its value;
// we could also throw an error as it is not a complete character, but someone may want to know }
var low = str.charCodeAt(1);
return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
}
if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate return code; // This is just a low surrogate with no preceding high surrogate, so we return its value;
// we could also throw an error as it is not a complete character, but someone may want to know
}
return code;
}
}
$(document).ready(function () {
var maxTxtNumber = 8;
var arrTxtNumber = new Array();
var txtvalues = new Array();
var arr = {};
$('.numericonly').keypress(function (e) {
var t = $(this).val();
var k = e.which;
delete arr[8];
if ((e.which >= 49 && e.which <= 55) || e.which == 8) {
if (e.which == 8) {
var s = new String(t);
s = s.charCodeAt(0);
delete arr[s];
}
if (arr[k]) {
e.preventDefault();
} else {
arr[k] = e.which;
}
} else {
e.preventDefault();
}
});
});
The code works on Firefox but not on IE and Chrome?
Other browsers use e.keyCode to tell you which key was pressed. Cross-browser:
var k = e.keyCode || e.which;
Also make sure you use k rather than repeating e.which every time.
All that code is not required. If you want to test that an input's value is only digits, then something like the following will do:
<input type="text" onblur="check(this);" ...>
function check(el) {
if (!isDigits(el.value)) {
alert('Hey!!\nThe element you just left should only contain digits');
}
}
function isDigits(s) {
return /^\d*$/.test(s);
}
It's much more friendly to give the user a hint about the format you require and wait until they either leave the control or submit the form before offering a warning about invalid values. You really don't care how the user gets to a valid value, just so long as it's valid when the form is submitted.
And you must validate on the server again.
I recommend running your code through a validator such as http://www.jslint.com/ to make sure that everything adheres to universal standards.

Categories