如何检测“ shift + enter”并在 Textarea 生成一条新线路?

目前,如果人按 enter内的文本区域,表格将提交。
很好,我也想要。

但是当他们键入 shift + enter时,我希望文本区移到下一行: \n

如何在 JQuery或普通 JavaScript 中尽可能简单地做到这一点?

147629 次浏览

使用 JQuery 热键插件和这段代码

jQuery(document).bind('keydown', 'shift+enter',
function (evt){
$('textarea').val($('#textarea').val() + "\n");// use the right id here
return true;
}
);

更好地使用更简单的解决方案:

蒂姆下面的解决方案更好,我建议使用: 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 + Enter组合在一起时,相应地替换 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();
}
}
});

这是 小样

简单而优雅的解决方案:

首先,在文本区域内按 Enter不会提交表单,除非你有脚本让它这样做。这是用户期望的行为,我建议不要改变它。但是,如果必须这样做,最简单的方法是找到使 Enter提交表单并更改它的脚本。这个代码的内容类似于

if (evt.keyCode == 13) {
form.submit();
}

你可以改成

if (evt.keyCode == 13 && !evt.shiftKey) {
form.submit();
}

另一方面,如果由于某种原因你不能访问这段代码,你需要做以下事情来使它在所有主流浏览器中都能正常工作,即使插入符号不在文本的末尾:

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);

为什么不呢

$(".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
}
});

这些答案大多过于复杂,为什么不试试这种方法呢?

$("textarea").keypress(function(event) {
if (event.keyCode == 13 && !event.shiftKey) {
submitForm(); //Submit your form here
return false;
}
});

不要搞乱插入符号的位置,也不要强行插入 JS。基本上,如果正在按 Shift 键,函数将不会运行,因此允许输入/返回键执行其正常的函数。

我发现这个线程寻找一种方法来控制 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));
});
});

如果有人在使用 AngularJS 时遇到同样的问题,这里有一个使用 关键时刻的 AngularJS 解决方案。

ng-keyup="$event.keyCode == 13 && !$event.shiftKey && myFunc()"

在 angularJS 中使用 ng-keyup指令,只在按 Enter键时发送消息,而 Shift+Enter将只取一个新行。

ng-keyup="($event.keyCode == 13&&!$event.shiftKey) ? sendMessage() : null"

如果有人仍然想知道如何在没有 jQuery 的情况下做到这一点。

超文本标示语言

<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 && e.shiftKey) {
e.preventDefault();
let start = e.target.selectionStart,
end = e.target.selectionEnd;
this.setState(prevState => ({ message:
prevState.message.substring(0, start)
+ '\n' +
prevState.message.substring(end)
}),()=>{
this.input.selectionStart = this.input.selectionEnd = start + 1;
})
}else if (e.keyCode === 13) { // block enter
e.preventDefault();
}
    

};


render(){
return(
<div>
New line with shift enter at any position<br />
<textarea
value={this.state.message}
ref={(input)=> this.input = input}
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>

我通过添加 contenteditable true 而不是 textarea 来使用 div。

Hope 可以帮你。

$("#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
}
}
})

这对我有用!

$("#your_textarea").on('keydown', function(e){
if(e.keyCode === 13 && !e.shiftKey)
{


$('form').submit();


}
});

用 Angular2 + 检测 Shift + Enter 键的另一种解决方案

内部组件

<input type="text" (keydown.shift.enter)="newLine($event)">

内部组件

newLine(event){
if(event.keyCode==13 && event.shiftKey){
alert('Shift+Enter key Pressed');
}
}

这个代码对我来说非常好用

document.getElementById('text').addEventListener('keypress', (e) => {
if (e.key == 'Enter' && !e.shiftKey) {
e.preventDefault()
console.log('your code goes here');
}
if (e.key == 'Enter' && e.shiftKey) {
e.preventDefault();
console.log("insertLineBreak");
const txtArea = document.getElementById('text');
txtArea.value += '\r\n';
}
})

还有 jquery 的例子

$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
        

/*When SHIFT return false*/
if(e.shiftKey==true) return false;


if(e.keyCode == 13)
{
/*You can do the thing on ENTER*/
alert('Enter press');
}


})
});
};
$('.exampleClass').pressEnter(function(){})
div{
width:200px;
height:100px;
border:solid 1px #000;
float:left;
}
textarea{
width:200px;
height:100px;
border:solid 1px #000;
float:right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="exampleClass" contenteditable></div>


<textarea  class="exampleClass"></textarea>

我知道这是一个老问题,但我想抛出一个隐含的观察,如果使用 Shift + A-Z,一些人可能想要考虑。

document.onkeydown = (k) => {
if (k.key === "Q") {
console.log("Shift + Q");
}
}

您可以根据大小写检查密钥,如 "Q""q"。如果是前者,则意味着 Shift因为是大写字母而被压缩。

这里涉及功能的一个 bug 是 CapsLock是否打开。但如果你像我一样,把它用在个人剧本上,那就没什么大不了的。

另一个潜在的好处可能是“隐藏”一个寻找要按下的 Shift键的显式条件。不过,这确实是一个半生不熟的建议。

一些复杂的解决方案发送 \n是不必要的。
keydown事件只返回键 13,如果移位被按下

​$("#mytestarea").keydown(function (e) {
​
​if (e.keyCode == 13) { // Enter pressed
//No shift or alt or ctrl
​if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
​SendMsg(); // or submit or what you wan't
​}
​if (e.shiftKey) {
//replace the shift for keycode 13 only
​return 13;
​}
​
​//method to prevent from default behaviour
​e.preventDefault();
​}
});
<input type="text" onkeydown="handleMessageKeydown" />

或一些内容可编辑元素:

<div contenteditable="true" onchange="handleMessageKeydown" />


handleMessageKeydown(e) {
if (!e.shiftKey && e.key === "Enter") {
e.preventDefault()
sendMessage()
}
}

如果 shift 是用 enter 按下的,那么它将创建新行,否则它将落在上面给出的 if 条件中。在 if 条件中,e.proventDefault ()行是最重要的。对于一个 keydown 事件处理程序,e.proventDefault ()停止运行该操作,以便您可以执行自己的操作,如向服务器发送消息等。

这是最好的办法

  if (e.key === 'Enter') {
console.log('enter');
}
if (e.key === 'Enter' && e.ctrlKey) {
console.log('clt+enter');
}
if (e.key === 'Enter' && e.ctrlKey && e.shiftKey) {
console.log('clt+shift+enter');
}