目前,如果该人在文本区域内按下enter,表单将提交。 好,我想要那个。
enter
但是当他们输入shift+时enter,我希望 textarea 移动到下一行:\n
shift
\n
我怎样才能JQuery尽可能简单地用 JavaScript 或纯 JavaScript 做到这一点?
JQuery
以下决方案更好我建议使用:
首先,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);
我认为你可以做这样的事情..
编辑: 无论插入符号位置如何,都将代码更改为工作
代码的第一部分是获取插入符号的位置。
参考:如何从一开始就以字符形式获取文本区域中的插入符号列(不是像素)位置?
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一起时相应地替换 textarea 值,如果Enter单独按下则提交表单。
Shift
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(); } } });
这是一个演示