How do I detect shift+enter and generate a new line in Textarea?
Better use simpler solution:
Tim's solution below is better I suggest using that:
https://stackoverflow.com/a/6015906/4031815
My solution
I think you can do something like this..
EDIT : Changed the code to work irrespective of the caret postion
First part of the code is to get the caret position.
Ref: How to get the caret column (not pixels) position in a textarea, in characters, from the start?
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(), rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
And then replacing the textarea value accordingly when Shift + Enter together , submit the form if Enter is pressed alone.
$('textarea').keyup(function (event) {
if (event.keyCode == 13) {
var content = this.value;
var caret = getCaret(this);
if(event.shiftKey){
this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
event.stopPropagation();
} else {
this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
$('form').submit();
}
}
});
Here is a demo
How can I only allow shift+enter to return new line in text area?
$("textarea").keydown(function(e){
// Enter was pressed without shift key
if (e.key == 'Enter' && !e.shiftKey)
{
// prevent default behavior
e.preventDefault();
}
});
Try the jsFiddle.
Textarea Shift+Enter for next line and Enter to submit the form
First, You missed to load any jquery version
Second, you missed #
before textarea
and form selectors
.
Also use caret
not carent
in line
this.value = content.substring(0,caret)+"\n"+content.substring(caret,content.length-1);
// ----------------------------------^
Full Code
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
$('#commenttextarea').keyup(function (event) {
if (event.shiftKey && event.keyCode == 13) {
var content = this.value;
var caret = getCaret(this);
this.value = content.substring(0, caret) + "\n" + content.substring(caret, content.length - 1);
event.stopPropagation();
} else if (event.keyCode == 13) {
$('#commentform').submit();
}
});
See this would work
Textarea: How do I allow newline on ALT + ENTER pressed?
Assuming it's a regular HTML textarea, using JavaScript you could use the following snippet to programmatically add a new line
var textarea = document.querySelector('#textarea');
textarea.value = textarea.value + "\r\n";
A full example of the event could look like this
document.addEventListener('keydown', function(event) {
if(event.altKey) {
this.setState({
altKey: true
});
}
if((event.keyCode == 13 || event.which == 13) && this.state.altKey) {
var textarea = document.querySelector('#textarea');
textarea.value = textarea.value + "\r\n";
}
});
document.addEventListener('keyup', function() {
this.setState({
altKey: false
});
}
Here you would define altKey
as false
in your state when your component loads and add the eventListener inside of componentDidMount()
.
Textarea does not stop making new line when Enter key is pressed
To stop newlines (along with carriage return), you need to capture 10
as well as 13
on keypress
using keycode
.
See this snippet:
$("textarea").on("keypress", function(e) { if ((e.keyCode == 10 || e.keyCode == 13)) { e.preventDefault(); chat(); }});
function chat() { alert("hello chat");}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textarea name='mesaj' rows='7' col='60'></textarea><br/><br/><input type='submit' value='Trimite mesaj!' onclick='chat()' />
Submit value on pressing Enter in textarea and pressing Shift+Enter should go to next line
I've answered this before. It's a little tricky if the caret is not at the end of the textarea:
How do I detect "shift+enter" and generate a new line in Textarea?
Related Topics
From an Array of Objects, Extract Value of a Property as Array
How to Use a Variable For a Key in a JavaScript Object Literal
How to Return the Response from an Observable/Http/Async Call in Angular
How to Avoid the Need For Ctrl-Click in a Multi-Select Box Using JavaScript
Replace HTML Page With Contents Retrieved Via Ajax
Getcurrentposition() and Watchposition() Are Deprecated on Insecure Origins
What Are the Nuances of Scope Prototypal/Prototypical Inheritance in Angularjs
How to Compare Arrays in JavaScript
JavaScript Onclick Function Is Called Immediately (Not When Clicked)
How to Download a File Without Using ≪A≫ Element With Download Attribute or a Server
How to Implement Dom Data Binding in JavaScript
Get All Unique Values in a JavaScript Array (Remove Duplicates)
Sorting an Array of Objects by Property Values
Event.Preventdefault() Vs. Return False
Removing an Item from a Select Box
How to Show Alternate Image If Source Image Is Not Found? (Onerror Working in Ie But Not in Mozilla)