Disable input when enter key pressed multiple times - javascript

How do I make so that when the enter key is pressed multiple times, the site only detects the input once? I have a small bug which occurs whenever the user double taps the enter key in an input box, so what I want to do is only accept the input press once. Thank you so much in advance!!
$('#search_list').keypress(function(e) {
if (e.which == '13') {
}
}

You can prevent repeatedly enter pressing by this way:
var enterPressed = false;
$('#search_list').keypress(function(e) {
if (e.which == '13') {
if( ! enterPressed){
// do some processing
return;
}
enterPressed = true;
setTimeout(function(){
enterPressed = false;
}, 1000);
}
}
Inspired by this post.

var enterPressed = false;
$('#search_list').keypress(function(e) {
if (e.which == '13') {
if( ! enterPressed){
// do some processing
enterPressed = true;
setTimeout(function(){
enterPressed = false;
}, 1000);
}
}
}
I think this way is better.

Related

in keydown event when press key(40),(38),(13) any of them, then immediately other function will stop.and current function will start

if i press any key of them (38)(40)(13) then immediately other function will stop.and current function will start.like if i press key(40) then function verticalSlideUp() will start.after that if i press key (38) then immediately function verticalSlideDown() will be start.and this verticalSlideUp() function will be stop.
i need help to do this.
This is my jsfiddle.net code here
here is my js code :
var allowed = true;
$(document).keydown(function (e) {
if (e.repeat != undefined) {
allowed = !e.repeat;
}
if (!allowed) return;
allowed = false;
if (controlsEnabled)
{
if (e.keyCode == 38) {
allowed = true;
verticalSlideDown();
console.log("pressed key for Down : "+e.keyCode);
}
if (e.keyCode == 40) {
allowed = true;
verticalSlideUp();
console.log("pressed key for Up: "+e.keyCode);
}
if (e.keyCode == 13) {
allowed = true;
var div= $(".scroll-inner-container");
console.log("pressed key for stop : "+e.keyCode);
div.stop();
}
}
});
I assume those slide functions have some infinite loop. Maybe you can try to have some variable like functionFired and at the beginning of function setting some value and if that loop detects change it will break.

How to prevent enter key press for multiple time using jquery?

I need to find continuous enter key pressing in jquery. Is this possible?
$('#password-input').keyup(function(e) {
if (e.which == 13) {
alert("Enter key")
}
});
Here If I am pressing ENTER key more than one time mean I am getting alerts for two times. But i need to get only one time only.
Please help me!
You can use jQuery#bind to bind the keyup event and than unbind the keyup event with jQuery#unbind when the end user pres the "Enter key" in order to prevent multiple times the "Enter key":
var $passwordInput = $('#password-input');
$passwordInput.bind('keyup', function(e) {
passwordInputKeyupHandler(e);
});
function passwordInputKeyupHandler(e) {
if (e.which === 13) {
console.log('Enter key!');
$passwordInput.unbind('keyup');
return setTimeout(function(){
console.log('Rebind keyup event');
$passwordInput.keyup(passwordInputKeyupHandler);
}, 2000);
}
console.log('Any other key...');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password-input" type="password">
Note that as pointed out by #dorado on the comments was made a 'rebind' after 2 seconds, using setTimeout(), in order to avoid the end user to have to make a page reload..
Besides using a variable to store the state I suppose you will also want that if a few milliseconds have passed, then pressing enter key again gives you an alert. This can be achieve by setTimeout. For example, here the enter key will be re-detected only if it is pressed after an interval of 2000ms.
var pressed = false;
$('#input-element').keyup(function(e) {
if (!pressed) {
if (e.which == 13) {
pressed = true;
alert('Enter pressed.');
i = setTimeout(function() {
pressed = false;
}, 2000);
}
}
});
Use a variable to store the state
var pressed = false;
$('#password-input').keyup(function(e) {
if (!pressed) {
if (e.which == 13) {
pressed = true;
alert('Enter key');
}
}
});
Use .setTimeout() to set delay for display alert. In delay time, if enter key pressed again, remove previous timeout and set new timeout. At the end of timeout, display alert.
var interval;
$('#password-input').keyup(function (e) {
if (e.which == 13) {
clearInterval(interval);
interval = setTimeout(function(){
alert("Enter key")
}, 500);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password-input" />
You can change time of delay to your custom time.
var pressed = false;
$('#password-input').on('keyup',function(e) {
if (e.which == 13 && !pressed) {
pressed = true;
alert("Enter key");
}
});

Use a preventdefault to get out of the loop after pressing Enter key

This is a complete revision of my initial question, all unnecessary resources and references were deleted
I am tying the same event listener to 2 different elements: a button and Enter key, and it looks like the following:
var funcelement = function(){
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click');
}
})
What I am trying to do is to prevent propagation of the enter key press if focus is on the submit button(#buttonID) by using preventDefault().
So I tried various combinations to make it work. The following is the latest result on my attempts
$('#inputID').keyup(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})
After I enter a text into an input box and press Enter key, a confirmation window with yes/cancel buttons pops up with focus on yes button. Once I press Enter again, another window confirming that changes were made pops up with Ok button focused on it. Once I press Enter again, everything I need is being made.
However, there is one problem: after the last step is done, I am going back to the if (!hasfocus) line.
How do I prevent that from happening? Once the stuff I need is done - I don't want to go into that line again.
You can pass a parameter to into the function and stop the propagation there like so:
var funcelement = function(event, wasTriggeredByEnterKey){
if (wasTriggeredByEnterKey && $('#buttonID').is(':focus')) {
event.stopPropagation;
}
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click', [true]);
}
}
)
UPDATE
In order to answer your revised issue, you should use the "keydown" event rather than "keyup" when working with alerts. This is because alerts close with the "keydown" event but then you are still triggering the "keyup" event when you release the enter key. Simply change the one word like this:
$('#inputID').keydown(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})

Validate email on enter

I want to validate an email textbox when I push the enter button. One problem: when i push enter, the text dissapears and nothing happens.
My code:
$(document).keypress(function(e) {
if (e.which == 13) {
mailcontrole();
}
});
function mailcontrole {
var mail = $("#email").val();
if (IsEmail(mail) == false) {
alert("false");
}
}
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
return false;
} else {
return true;
}
}
You have the default behaviour of submitting your form using the ENTER.
$(document).keypress(function(e) {
e.preventDefault();
if (e.which == 13) {
mailcontrole();
}
});
Adding e.preventDefault(); stops this behaviour!
UPDATE
Your function is missing () also ( Thanks to Alex )!
function mailcontrole() {
var mail = $("#email").val();
if (IsEmail(mail) == false) {
alert("false");
}
}
the form may submit because the form gets submitted when you click enter and that would empty the form.
use event.preventDefault() to make it not submit.
try this:
$(document).keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
mailcontrole();
}
});

How to prevent ENTER key to change line in web form

I want to submit the form by press the ENTER key.
But it also change the line in content.
How to prevent this?
This is my code, but when hit ENTER, the ... run and Cursor moved to the next line:
function postmessage(e) {
if(e) {
e.preventDefault = null || e.preventDefault;
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
....
return false;
}
function submitmessage(e) {
if(e.keyCode == 13) {
postmessage(e);
}
return false;
}
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener){
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent){
el.attachEvent('on'+eventName, eventHandler);
}
}
bindEvent(text, 'keydown', submitmessage);
Generally it is a bad idea to screw around with default behavior of the browser. Personally I would hate it if I was typing in some text, hit enter and bam, without a proper review of my data it get's submitted?!
If you don't want people to enter multiple lines in a textarea, why not make it a regular textbox (<input type="text" />)?
While I completely agree with #Peter in that this will create a very awkward and annoying user experience, here's how to achieve it code-wise: Capture the event on a keydown, and bypass the newline with event.preventDefault(). Then manually submit your form.
Something like this:
var el = document.getElementById('#my_textarea');
if (el.addEventListener)
{
el.addEventListener('keydown', checkEnter(event), false);
}
else if (el.attachEvent){
el.attachEvent('keywodn', checkEnter(event));
}
function checkEnter(event)
{
var charCode = (event.which) ? event.which : event.keyCode
// Enter key
if(charCode == 13) {
event.preventDefault();
document.myform.submit();
return false;
}
}
MDN Docs:
https://developer.mozilla.org/en/DOM/event.preventDefault
https://developer.mozilla.org/en/DOM/element.addEventListener
e.stopPropagation(); stopped the default action.

Categories

Resources