How to Detect "Shift+Enter" and Generate a New Line in Textarea

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



Leave a reply



Submit