目前,如果人enter在文本区域内按下,则表单将提交。
很好,我想要那个。
但是当他们输入shift+ 时enter,我希望 textarea 移动到下一行:\n
我怎样才能在JQuery
JavaScript中或纯 JavaScript 中尽可能简单地做到这一点?
目前,如果人enter在文本区域内按下,则表单将提交。
很好,我想要那个。
但是当他们输入shift+ 时enter,我希望 textarea 移动到下一行:\n
我怎样才能在JQuery
JavaScript中或纯 JavaScript 中尽可能简单地做到这一点?
首先,Enter在 textarea 内按下不会提交表单,除非您有脚本来做到这一点。这是用户期望的行为,我建议不要更改它。但是,如果您必须这样做,最简单的方法是找到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);
下面蒂姆的解决方案更好,我建议使用它:https : //stackoverflow.com/a/6015906/4031815
我认为你可以做这样的事情..
编辑:无论插入符号的位置如何,都将代码更改为工作
代码的第一部分是获取插入符号位置。
参考:如何从一开始就以字符形式获取文本区域中插入符号列(不是像素)的位置?
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+ Entertogether时相应地替换 textarea 值,如果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();
}
}
});
这是一个演示
这些答案中的大多数都使问题变得过于复杂。为什么不试试这种方式呢?
$("textarea").keypress(function(event) {
if (event.keyCode == 13 && !event.shiftKey) {
submitForm(); //Submit your form here
return false;
}
});
没有乱七八糟的插入符号位置或推线中断到 JS。基本上,如果按下 shift 键,该功能将不会运行,因此允许输入/返回键执行其正常功能。
为什么不只是
$(".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
}
});
如果有人在使用 AngularJS 时遇到同样的问题,这里是一个使用ng-keyup的 AngularJS 解决方案。
ng-keyup="$event.keyCode == 13 && !$event.shiftKey && myFunc()"