Handling Enter Key on Text Area using javascript - javascript

I have 5 text areas on a page and I would like a specific event to occur on hitting the enter key on the first text area and a different event on enter key of the other text areas. Can you please suggest on how this can be acheived.
<TextArea></TextArea>
<TextArea></TextArea>
<TextArea></TextArea>
<TextArea></TextArea>
<TextArea></TextArea>
when hitting the enter on 1st Text Area, alert('Text Area 1 clicked');
when hitting the enter on the other 4 Text Area, alert ('Other Text Area's clicked');
Can this be acheived using jquery.

http://jsfiddle.net/26kN7/1/
$("textarea").keyup(function(e) {
var code = e.keyCode ? e.keyCode : e.which;
if (code == 13) { // Enter keycode
if($(this).hasClass("first")) {
alert("first ta clicked");
} else {
alert("the other ta clicked");
}
}
});
in some versions of FFX pressing <Tab>, e.which isn't set (remains 0), but e.keyCode is (9).
you can also shorten this to
$("textarea").keyup(function(e){
if((e.keyCode || e.which) == 13) { //Enter keycode
if($(this).hasClass("first")) {
alert("first ta clicked");
} else {
alert("the other ta clicked");
}
}
});
the other thing note is I like adding the class here than finding the first textarea is cos this is more generic solution and could cater to any of the textareas.

You could try using:
$('textarea').keypress(
function(e){
if (e.keyCode == 13) {
if ($(this).index() == 0) {
// code for first textarea;
}
else {
// code for others
}
}
});
JS Fiddle demo.

Check the which property of the jQuery event object to determine which key was pressed.
$('textarea').first().keypress(function (e)
{
if (e.which === 13) alert('Text Area 1 enter key pressed');
}).nextAll().keypress(function (e)
{
if (e.which === 13) alert('Other Text Area enter key pressed');
});

Related

Spacebar (keycode 32) to act as Enter key except inside an input field

I'm working on adding accessibility to a program for hard-of-seeing users. For this, we are using the tab key to maneuver through the page. The user can then use the spacebar as the enter key, to open a link they are focused on, for example. I'm working on the spacebar to act in this manner at all times (using "e.preventDefault()"), except of course when inside an input field. I've written what makes logical sense to me, but does not work. Does anyone have any suggestions, please? This is what I have in a javascript file:
var textFieldEntry = document.querySelectorAll('input.field-input');
if (e.key == 'Space' || e.keyCode == 32) {
if (e.target !== textFieldEntry) {
e.preventDefault();
e.target.click();
};
}
Please correct me this text,
I am using android browser
so i need the spacebar to act as physical spacebar
with an API, This physical spacebar is actually itself acting as Enter (to select from list) and adding "space" to the text.
its like an interactive text correction
var textFieldEntry = document.querySelectorAll('textarea.field-input');
$(document).on('keyup', function(e){
if (e.key == 'Space' || e.keyup == 229) {
console.log("space pressed");
console.log("e.target", e.target);
console.log("textFieldEntry", textFieldEntry);
if (e.target !== textFieldEntry) {
e.preventDefault();
e.target.click();
};
}
});
not an answer, designed to show OP why his function doesn't work as intended and will be removed
var textFieldEntry = document.querySelectorAll('input.field-input');
$(document).on('keydown', function(e){
if (e.key == 'Space' || e.keyCode == 32) {
console.log("space pressed");
console.log("e.target", e.target);
console.log("textFieldEntry", textFieldEntry);
if (e.target !== textFieldEntry) {
e.preventDefault();
e.target.click();
};
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="field-input"/>
<input class="field-input"/>
<input class="field-input"/>

in textbox how when when I press ENTER submit the Form and when I press shift+ENTER insert new line

how in textbox when when I press Enter submit the Form and when I press Shift+Enter insert new line like facebook comments and posts
might have a solution for your submit on Enter
Assuming you're using jquery :
$('your-input-selector').keypress(function(event) {
if (event.keyCode == 13) {
$('form').submit();
}
});
Javascript :
The HTML input
<input type="text" onkeypress="myKeyPressHandler(event)">
Javascript function
function myKeyPressHandler(event) {
if (event.keyCode == 13) {
document.getElementById("myForm").submit();
}
}
Edit 1
Here your solution for the Shift+Enter combination:
Jquery:
$('your-selector').keyup(function (e) {
if (e.which === 13 && e.shiftKey) {
alert('shift enter pressed');
//Do your work here
}
});
Non-Jquery :
<input type="text" onkeyup="myKeyUpHandler(event)">
Javascript function:
function myKeyUpHandler(e) {
if (e.which === 13 && e.shiftKey) {
alert('shift enter pressed');
//Do your work here
}
}

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() {});

Fire event on hit enter and change

I have one text box when user enter in text box and hit enter it should alert the value, and also if user change the value it should also alert. So there will be two events keypress and change. And I want call this with minimum code. no duplicate codes.
$('#txt').keydown(function (e){
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})​
Online Demo
You can list multiple events as the first parameter (though you still have to handle each event):
$('#txt').bind('keypress change', function (e){
if(e.type === 'change' || e.keyCode == 13) {
alert('you pressed enter ^_^');
}
})​;​
I'm using bind on purpose, because the OTs fiddle uses jQ 1.5.2
This is how I would approach this problem.
http://jsfiddle.net/tThq5/3/
Notes: I'm using $.live() (v.1.3) rather than $.on() (v1.7) and also returning false so I don't get more than 1 event fired.
$('#txt').live('keypress change', function(e) {
if (e.type === 'keypress' && e.keyCode == 13) {
alert('you pressed enter');
return false;
} else if (e.type === 'change') {
alert('you made a change');
return false;
}
});​
Something like this?
$('#txt')
.keydown(function (e) {
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})
.change(function(e) {
alert('you changed the text ^_-');
});
Try the live approach:
$("#txt").live({
change: function(e) {
alert('you changed the value');
},
keydown: function(e) {
if (e.keyCode == 13) {
alert('you pressed enter ^_^');
}
}
});
http://jsfiddle.net/tThq5/1/

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

Categories