How to prevent entering multiple + in a textbox in jquery - javascript

My current code is like this
$('.textBoxClass').bind('keypress', function (e) {
return (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46 && e.which != 43) ? false : true;
});

Use the jQuery keyup event.
You need to check if event.keyCode is + and if input field already contains +.
If yes, you can prevent the event with event.preventDefault().
Or you can use some third-part plugin like jqueryvalidation and use a regular expression.
Remember to validate the data serverside because javascript validation can be easily bypassed.

Related

Detach keyup for Space bar and Enter keys

Using jQuery 3.+, how can I detach keyup on buttons triggered by the Space bar and Enter keys?
I have something like this:
$("#MAIN").on("keyup", "#scrub-btn.buttonOn:focus", function(e){
var allthesekeys = ( e.which == 107 || e.which == 109 || e.which == 96 || e.which == 97 || e.which == 98 || e.which == 99 || e.which == 100 || e.which == 101 || e.which == 102 || e.which == 103 || e.which == 104 || e.which == 105 );
if ( allthesekeys ){
// Do the scrubbing here...
} else {
$(this).off("keyup");
// Can we use $(this) here? Why are Space bar and Enter keys ignoring this?
}
});
Must I rethink my strategy? Any pointers appreciated.
You are using event delegation...
So the event handler (the function) is attached to #MAIN to handle the event occuring in #scrub-btn.buttonOn.
$(this) represents the element where the event occurs... Not the element delegated to handle the event. That is why the .off() is not working.
Use $("#MAIN") instead... Or $(this).closest("#MAIN") because that is the element which has to be detached from the event listener.
CodePen
I am tempted to suggest a more consise way to write your condition:
var allthesekeys = [107,109,96,97,98,99,100,101,102,103,104,105];
if ( allthesekeys.indexOf(e.which) > -1 ){...}
It will be easier to maintain...
;)
I think you are looking for e.preventDefault();

only number for textbox in angular.js

i want one textbox which only accpet the number, this solution i need without html5 support.
i have textbox inside the custom directive template.
ng-keypress="Validation($event)"
and
in controller of that directive, i wrote like this :
$scope.Validation = function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
}
but it is not working, any idea?
Just add the following line before the return false;:
e.preventDefault();
This will prevent the keypress event propagation and will cancel the user's input.

JS - Backspace Detection Not Working

I have some code which is a basic highlighting system, when I try to catch backspaces, I can't catch them, even when I use onkeydown and keypress.
I am using jQuery to get the events and register the function calls. Here is my code:
if (e.charCode == 8 || e.charCode == 46 || e.charCode == 35) {
if (errCount) {
errCount--;
}
backLetter(index);
index--;
}
Use .which, as in e.which == 8
https://jsfiddle.net/skdreow5/1/
var xTriggered = 0;
$( "#target" ).keydown(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
if ( event.which == 8 ||
event.which == 46 ||
event.which == 35 ) {
console.log("backspaced: " + event.which);
}
xTriggered++;
var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
console.log(msg);
});
DEMO
Regarding e.charCode
This feature is non-standard and is not on a standards track. Do not
use it on production sites facing the Web: it will not work for every
user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
Either use e.which or e.keyCode to trap the backspace. Some browsers support e.which and some support e.keyCode. As part of jQuery concerned, they have normalized e.which in the event object. In case you're using jQuery go with e.which.
$(function() {
$("input").keyup(function(e) {
if(e.keyCode==8) {
alert("Backspace pressed");
}
});
});

How to avoid min value 0 in input type?

I want to avoid the min value 0 for my input type.
I am using following jquery but it allows to enter 0.
$('input.numeric').bind('keypress', function (e) {
return (e.which != 8 && e.which > 0 && (e.which < 48 || e.which > 57)) ? false : true;
})
I tried to make it with html-5 setting attribute type="number" but unfortunately mozila does not support it.
I just want my input type to accept the numeric other grater than 0, not decimal at all or any thing else.
By refactoring your return statement, with a direct and more readable way, you can get something like this:
$('input.numeric').bind('keypress', function (e) {
return (e.which > 48 && e.which <= 57) // If it's a number between 1 and 9
|| (e.which == 48 && $(this).val() != "") // Or 0 and the field isn't empty
|| e.which == 8; // Or backspace
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type a number: <input class="numeric" type="text" />
Be aware this validation doesn't allow the user to use directional arrow in your field though... And a server-side verification is always mandatory, since the user can disable JS. Even though Firefox does not support it, you should use type="number".
You could also do this;
<input type='number' min='1'>
EDIT
$("input.numeric").focusout(function() {
if($("input.numeric").val() < 1){
$("input.numeric").val(1);
}
});

Know if input is in use and disable the hotkey (Jquery)

I use some hotkeys on my website, but when the user is inside the search form or inside comment. I want to disable them.
What the best for me to do it? Thanks
Example of my hotkey:
$(document).keydown(function(e)
{
if (e.which == 40 || e.which == 74) // next post
{
return scroll('next');
}
if (e.which == 38 || e.which == 75) // prev post
{
return scroll('prev');
}
});
You can check for the event.target element. If that element is from type INPUT you might want to omit the handler code. Could look like
$(document).keydown(function(e)
{
if( e.target.nodeName !== 'INPUT' ) {
if (e.which == 40 || e.which == 74) // next post
{
return scroll('next');
}
if (e.which == 38 || e.which == 75) // prev post
{
return scroll('prev');
}
}
});
You could check if e.target.nodeName === INPUT (the event is triggered inside an input field) and act accordingly

Categories

Resources