I am new to Vue.js. I want an input field which accepts only numeric numbers and if the user enters any other value it will be replace with the empty string. Therefore, I want to add a custom directive to this field viz 'numericOnly'.
Code for custom directive :
Vue.directive('numericOnly', {
bind (el, binding, vnode) {
regex = /^[0-9]*$/
if(!regex.test(el.value)){
el.value = el.value.slice(0, -1)
}
}
})
Here is my template :
<input v-numericOnly name="mobileNumber" placeholder="Mobile Number" >
But it runs only the one time when the input field is bound to the DOM.
Please help me figure out this problem. Thank you in advance.
Your directive should listen keyup of the input element to achieve what you need:
Vue.directive('numericOnly', {
bind(el) {
el.addEventListener('keyup', () => {
let regex = /^[0-9]*$/
if (!regex.test(el.value)) {
el.value = el.value.slice(0, -1)
}
})
}
})
import Vue from 'vue'
Vue.directive('numericOnly', {
bind(el, binding, vnode) {
el.addEventListener('keydown', (e) => {
if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// 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()
}
})
}
})
Related
I am new to wordpress developement.I wabt to apply my own validation to contatc form 7.Adding same in Header.php file but getting no result.
adding this for mobile number validation in header.php file
<script type="text/javascript">
$("#field-mobile").keydown(function(event) { // Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) { // let it happen, don't do anything
} else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
</script>
That is so simple, the script does not work since your code is run before your input text is exist on DOM.
You should add $(document).ready() function then put your block of codes in that function.
I guess this is should work now:
$(document).ready(function() {
$('#field-mobile').bind('keypress', function(e) {
if (e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9) { // let it happen, don't do anything
} else {
console.log('else block')
if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
});
});
I'm trying to format a date as the user enters into the input field by assigning a class to it which is inside a function. I know its firing but something is quite right its throwing [object] in the input field. My end goal is as the user types it will throw a / after the first two characters and then another / after the next two: 01/01/2017
CODE:
$(document).off('keydown', '.dateField');
$(document).on('keydown', '.dateField', function(e){
var start = this.selectionStart,
end = this.selectionEnd;
if($(this).val().replace(/[^\d]/g,"").length<$(this).val().length)
end = end-1;
$(this).val($(this).toString().substr(0,2)+"/"+$(this).toString().substr(2));
this.setSelectionRange(start, end);
}
UPDATED CODE:
$(document).on('keydown', '.dateField', function(e){
$(this).attr('maxlength', '10');
var key=String.fromCharCode(e.keyCode);
if(!(key>=0&&key<=9)){
$(this).val($(this).val().substr(0,$(this).val().length-1));
}
var value=$(this).val();
if(value.length==2||value.length==5){
$(this).val($(this).val()+'/');
}
This is not preventing letters and symbols how do i add regex to prevent this problem. (super noob at egex)
Final Code:
$(document).off('keydown', '.dateField');
$(document).on('keydown', '.dateField', function(e){
$(this).attr('maxlength', '10');
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === 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();
}
var value=$(this).val();
if(value.length==2||value.length==5){
$(this).val($(this).val()+'/');
}
}
Hi i would like to restrict a function that allows only, numbers, back space and left & right arrow keys to inputs with number type, because when i implement it, it also affects my text inputs.
<script>
function chars(evt){
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
}
</script>
Assign an id to your <input>. Add an event listener to it, like :
function getKeyCode() {
var key = window.event ? event.keyCode : event.which;
if(event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
console.log(true);
//return true;
} else if (key < 48 || key > 57) {
console.log(false);
// return false;
} else {
console.log(true);
// return true;
}
}
var el = document.getElementById("myInput");
el.addEventListener("keypress", getKeyCode);
<input type="text" id="myInput">
This is my code
$(currentClass).keypress(function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
The only problem with this is that, every time I hit a key for the first time regardless a letter or a number, it shows up in my content editable span tag. However, the second time I hit a letter key the code works, it only accepts number. I have no idea what is wrong with this code in the first pressing of keys.
Use JQuery's .on() method.
$(currentClass).on("keypress",function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
This is what I used
if ($.inArray($event.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
($event.keyCode == 65 && $event.ctrlKey === true) ||
// Allow: home, end, left, right
($event.keyCode >= 35 && $event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if (($event.shiftKey || ($event.keyCode < 48 || $event.keyCode > 57)) && ($event.keyCode < 96 || $event.keyCode > 105)) {
$event.preventDefault();
}
I was able to solve the problem with this. If their suggestion is not working try this.
Bind Properly your events
$(document).ready(function(){
$(body).on("keypress","currentClass",function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});
});
$(currentClass).on('keypress', function (e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
e.preventDefault();
alert("pressed");
return false;
}
});
event - on
This might helps you :)
I need to restrict user to input minus symbol. How to do it useing following jQuery I have got?
$("#Age").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter
if ($(this).val().length <= 2 || $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
event.preventDefault();
}
// Ensure that it is a number and stop the keypress
if ($(this).val().length <= 2 || (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
else {
event.preventDefault();
}
});
}); // end of $
ASCII key codes
Minus symbol ASCII value is 45
$("#Age").keydown(function (e) {
if (e.keyCode != 45) { //it does't allow user to enter minus(-) symbol
..
}
else {
event.preventDefault();
}
}); // end of $