jQuery not detecting enter key pressed in textarea - javascript

My setup: jQuery 1.6.2
I have this HTML
<textarea class="comment_box"> Write a comment...</textarea>
And the following Javascript
<script>
$('.comment_box').keydown(function (e){
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})
</script>
When I press the enter key in the textarea, nothing triggers
EDIT Oops, cut and paste error, I do have $ in my code and it still doesn't work, must be something else going on.
My bad, it is a user operator error, it does work. Sorry for the confusion.

$('.comment_box').keypress(function(event) {
// Check the keyCode and if the user pressed Enter (code = 13)
if (event.keyCode == 13) {
alert('you pressed enter ^_^');
}
});
Thats it

Check out this answer:
jQuery Event Keypress: Which key was pressed?
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}

For jQuery you need to use the $ to specify.
$('.comment_box').keyd
should do it.

Related

Detect Tab Key event on textbox on focus

I have a autocomplete textbox in a form and I want to detect whether user has focussed on the textbox from navigating through tab key press.I mean tabindex has been set up on different form fields and user can navigate fields by pressing tabs.Now I want to perform some action when user directly mouse click/foxus on the textbox and some other action when user has focussed on the textbox through tab.
Below is the code I was trying.But no matter everytime code is 0.
$('#tbprofession').on('focus', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('Tabbed');
}
else
{
alert('Not tabbed');
}
});
This code does not work.
Note:Before marking duplicate it will be good if you understand the question correctly.Else I can make it more clear with more elaborated description.
Anyone can show me some light?
You can try something like that :
$(document).on("keyup", function(e) {
if ($('#tbprofession').is(":focus")) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('I was tabbed!');
} else {
alert('not tabbed');
}
}
});
fiddle : https://jsfiddle.net/xc847mrp/
You can use keyup event instead:
$('#tbprofession').on('keyup', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
console.log('I was tabbed!', code);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autofocus>
<input id='tbprofession'>
You could have an array of key events triggered anytime a user presses a key while on your page. Although this makes you think of a keylogger.
Or just keep the last key.
Or a boolean saying if the last key pressed was a TAB or not.
And on focus you can look at that variable.

If key pressed after an input clicked

I want to know if the user clicked the input and after that pressed the enter key:
$('#AdsData tr td input').live('keypress', function (e) {
// if the Enter key is presses
if (e.which == 13) {
}
});
I tried it: clicked an input and pressed enter but the function wasn't called..
may be you can try doing with e.which and e.keyCode both this way:
var kc = e.which || e.keyCode;
if (kc == 13) {
and instead of keypress try with keyup or keydown
Try this
$('input').keydown(function(event) {
if(event.which == 13) {
alert('Enter.');
}
});
if the input element is part of a form, pressing enter will most likely submit the form. in that case try this:
$("#your_form").on("submit", function() {});

Disable enter submit

I have a form with a textfield inside and I am trying to disable the default behavior when the browser submits the whole form if the user presses Enter while the textfield is selected.
$('#recaptcha_response_field').keydown(function(event) { if (event.keyCode == 13) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
alert("You Press ENTER key");
return false;
}
});
Currently am getting "You Press ENTER key" and the default behavior isn't overridden.
Try this:
$(document).on("keypress", 'form', function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
This will prevent the form submit on keypress
DEMO HERE
I found this and it works for me.
<input type="text" name="somename" id="someid" value="" onkeypress="return event.keyCode!=13">
To prevent the script from blocking the enter key on other elements such as on a textarea. Change the target from "form" to "input".
$(document).on("keypress", "input", function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
If none of the above solution is working for you , and you are using javascript anyway , why don't you use button type as 'button' <input type='button'> and submit it using javascript
$('#form_id').submit();
U can use this script to prevent enter on entire from.
<script type="text/javascript">
$(document).on("keypress", 'form', function (e) {
if (e.target.className.indexOf("allowEnter") == -1) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
}
});
</script>
you put the classname to which control need to use enter

Stopping enter key submitting also stops enter key in multi line text edit

There are lots of solutions on the web for stopping the enter key from submitting a form. Most commonly to use <body onkeypress = ...
But these seem to have the undesired side effect of stopping the enter key working in a multi-line text box. Does anyone know of a way around this, so the enter key will still work in a multi-line text box?
Thanks,
AJ
<script language="Javascript">
document.onkeydown = function() {
if (event.keyCode == 13) {
if (document.activeElement.tagName.toLowerCase () != "textarea") {
event.preventDefault();
return false;
}
}
}
</script>
Something like this?
You can try the following (with jquery):
$(function(){
$('input:not(textarea)').live('keypress', function(e) {
if (e.which == 13) return false;
if (e.which == 13) e.preventDefault();
});
});
Only input fields are targeted, not textareas.
NON JQUERY
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode;
else
key = e.which;
return (key != 13);
}
And add onKeyPress on all text inputs
<input type="text" name="textIn" onKeyPress="return disableEnterKey(event)"/>
Ref : http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

Overwriting key events

How to overwrite or remove key events, that is on a website? I'm writing a script for GreaseMonkey and I want to make event on Enter button, but when I press the ENTER button, it triggers function on website.
EDIT 1: Here is the website, that I need to do this http://lockerz.com/auth/express_signup
One of these two should do it for you. I used the first one, although someone on SO told me the second one will work also. I went for the hammer.
Sorry, first one wasn't a cut and paste answer. I use using it to return up/down arrow control on a website. I changed it so that it identifies keycode 13 instead.
(function() {
function keykiller(event) {
if (event.keyCode == 13 )
{
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
window.addEventListener('keypress', keykiller, true);
window.addEventListener('keydown', keykiller, true);
})();
Searching quickly on SO:
jQuery Event Keypress: Which key was pressed?
Code from there:
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
Without a library, use: http://jsfiddle.net/4FBJV/1/.
document.addEventListener('keypress', function(e) {
if(e.keyCode === 13) {
alert('Enter pressed');
return false;
}
});

Categories