В настоящее время, если человек нажимает enter внутри текстовой области, форма будет отправлена.
Хорошо, я хочу это.
Но когда они набирают shift + enter, я хочу, чтобы текстовая область переместилась на следующую строку: \n
Как я могу сделать это в JQuery или простом JavaScript как можно проще?
Тим решение ниже лучше, я предлагаю использовать это: fooobar.com/questions/55488/...
Я думаю, что вы можете сделать что-то вроде этого..
РЕДАКТИРОВАТЬ: изменил код для работы независимо от позиции каретки
Первая часть кода - получить позицию каретки.
Ссылка: Как получить позицию столбца каретки (не пикселей) в текстовой области, в символах, с самого начала?
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;
}
И затем, соответственно заменяя значение текстовой области, когда Shift + Enter вместе, отправьте форму, если Enter нажата одна.
$('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();
}
}
});
Вот демо
Во-первых, нажатие Enter внутри текстовой области не отправляет форму, если у вас нет сценария, чтобы сделать это. Это поведение, которое ожидает пользователь, и я бы рекомендовал не менять его. Однако, если вы должны сделать это, самый простой подход - найти скрипт, который заставляет Enter отправить форму и изменить ее. Код будет иметь что-то вроде
if (evt.keyCode == 13) {
form.submit();
}
... и вы можете просто изменить его на
if (evt.keyCode == 13 && !evt.shiftKey) {
form.submit();
}
С другой стороны, если по какой-то причине у вас нет доступа к этому коду, вам нужно сделать следующее, чтобы он работал во всех основных браузерах, даже если курсор не находится в конце текста:
jsFiddle: http://jsfiddle.net/zd3gA/1/
Код:
function pasteIntoInput(el, text) {
el.focus();
if (typeof el.selectionStart == "number"
&& typeof el.selectionEnd == "number") {
var val = el.value;
var selStart = el.selectionStart;
el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
el.selectionEnd = el.selectionStart = selStart + text.length;
} else if (typeof document.selection != "undefined") {
var textRange = document.selection.createRange();
textRange.text = text;
textRange.collapse(false);
textRange.select();
}
}
function handleEnter(evt) {
if (evt.keyCode == 13 && evt.shiftKey) {
if (evt.type == "keypress") {
pasteIntoInput(this, "\n");
}
evt.preventDefault();
}
}
// Handle both keydown and keypress for Opera, which only allows default
// key action to be suppressed in keypress
$("#your_textarea_id").keydown(handleEnter).keypress(handleEnter);
Большинство из этих ответов преодолевают это. Почему бы не попробовать это так?
$("textarea").keypress(function(event) {
if (event.keyCode == 13 && !event.shiftKey) {
submitForm(); //Submit your form here
return false;
}
});
Не вмешиваться в позицию каретки или перетаскивать строки в JS. В принципе, функция не будет работать, если клавиша сдвига нажата, поэтому позволяет клавише ввода/возврата выполнять свою нормальную функцию.
Почему не просто
$(".commentArea").keypress(function(e) {
var textVal = $(this).val();
if(e.which == 13 && e.shiftKey) {
}
else if (e.which == 13) {
e.preventDefault(); //Stops enter from creating a new line
this.form.submit(); //or ajax submit
}
});
Используйте jQuery hotkeys и этот код
jQuery(document).bind('keydown', 'shift+enter',
function (evt){
$('textarea').val($('#textarea').val() + "\n");// use the right id here
return true;
}
);
Вот решение AngularJS, используя ng-keyup, если у кого-то есть такая же проблема с помощью AngularJS.
ng-keyup="$event.keyCode == 13 && !$event.shiftKey && myFunc()"
Я нашел эту нить, которая ищет способ управлять Shift + любой клавишей. Я вложил вместе другие решения, чтобы сделать эту комбинированную функцию для выполнения того, что мне нужно. Надеюсь, это поможет кому-то другому.
function () {
return this.each(function () {
$(this).keydown(function (e) {
var key = e.charCode || e.keyCode || 0;
// Shift + anything is not desired
if (e.shiftKey) {
return false;
}
// allow backspace, tab, delete, enter, arrows, numbers
//and keypad numbers ONLY
// home, end, period, and numpad decimal
return (
key == 8 ||
key == 9 ||
key == 13 ||
key == 46 ||
key == 110 ||
key == 190 ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
});
Я использую div, добавляя contenteditable true вместо использования textarea.
Надежда может помочь вам.
$("#your_textarea").on('keydown', function(e){//textarea keydown events
if(e.key == "Enter")
{
if(e.shiftKey)//jump new line
{
// do nothing
}
else // do sth,like send message or else
{
e.preventDefault();//cancell the deafult events
}
}
})
используя директиву ng-keyup в angularJS, только отправьте сообщение при нажатии клавиши Enter, а Shift+Enter просто возьмет новую строку.
ng-keyup="($event.keyCode == 13&&!$event.shiftKey) ? sendMessage() : null"
В случае, если кто-то все еще задается вопросом, как это сделать без jQuery.
HTML
<textarea id="description"></textarea>
Javascript
const textarea = document.getElementById('description');
textarea.addEventListener('keypress', (e) => {
e.keyCode === 13 && !e.shiftKey && e.preventDefault();
})
Ваниль JS
var textarea = document.getElementById('description');
textarea.addEventListener('keypress', function(e) {
if(e.keyCode === 13 && !e.shiftKey) {
e.preventDefault();
}
})
Для тех, кто использует ReactJS ES6, здесь самый простой способ
shift + enter Новая Линия
enter Заблокирован
class App extends React.Component {
constructor(){
super();
this.state = {
message: 'Enter is blocked'
}
}
onKeyPress = (e) => {
if (e.keyCode === 13) { // block enter
e.preventDefault();
}
if (e.keyCode === 13 && e.shiftKey) {
e.preventDefault();
this.setState(prevState => ({ message: prevState.message+'\n' }))
}
};
render(){
return(
<div>
New line with shift enter<br />
<textarea
value={this.state.message}
onChange={(e)=>this.setState({ message: e.target.value })}
onKeyDown={this.onKeyPress}/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>