关于javascript：如何检测“shift + enter”并在Textarea中生成一个新行？


How do I detect “shift+enter” and generate a new line in Textarea?

目前，如果此人在文本区域内按enter，表单将提交。
好，我想要那个。

但是当他们键入shift + enter时，我希望textarea移动到下一行：

我怎样才能在JQuery或纯JavaScript中尽可能简单地执行此操作？

相关讨论

简单优雅的解决方案：

首先，在textarea中按Enter不会提交表单，除非您有脚本来执行此操作。这是用户期望的行为，我建议不要改变它。但是，如果必须这样做，最简单的方法是找到使Enter提交表单并更改它的脚本。代码将有类似的东西

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

......你可以改成它

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

另一方面，如果由于某种原因无法访问此代码，则需要执行以下操作以使其在所有主要浏览器中都可以工作，即使插入符号不在文本的末尾：

jsFiddle：http：//jsfiddle.net/zd3gA/1/

码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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,"
");
        }
        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

我的解决方案

我想你可以做这样的事......

编辑：改变代码工作，不管插入符号位置

代码的第一部分是获得插入位置。

参考：如何从一开始就以字符形式在textarea中获取插入符号列(不是像素)的位置？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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则提交表单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('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) +"
" + content.substring(caret, content.length);
            event.stopPropagation();
        } else {
            this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
            $('form').submit();
        }
    }
});

这是一个演示

相关讨论

大多数答案都过于复杂。为什么不这样试试呢？

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

没有乱七八糟的插入位置或推断线条突破JS。基本上，如果按下shift键，该功能将不会运行，因此允许输入/返回键执行其正常功能。

为什么不呢

1
2
3
4
5
6
7
8
9
10
$(".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
    }
});
相关讨论

以下是使用ng-keyup的AngularJS解决方案，如果有人使用AngularJS有相同的问题。

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

使用jQuery热键插件和此代码

1
2
3
4
5
6
7
jQuery(document).bind('keydown', 'shift+enter',
         function (evt){
             $('textarea').val($('#textarea').val() +"
");// use the right id here
             return true;
         }
);
相关讨论

我发现这个线程正在寻找一种方法来控制Shift +任何键。我将其他解决方案粘贴在一起，使这个组合功能完成我所需要的。我希望它可以帮助别人。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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));
    });
});

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

希望可以帮到你。

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#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
    }
  }
})

对于使用ReactJS ES6的人来说，这是最简单的方法

shift + enter新行

enter被阻止了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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+'
' }))
    }
  };

  render(){
    return(
     
      New line with shift enter<br />
       <textarea
       value={this.state.message}
       onChange={(e)=>this.setState({ message: e.target.value })}
       onKeyDown={this.onKeyPress}/>
     
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js">

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

HTML

使用Javascript

1
2
3
4
5
const textarea = document.getElementById('description');

textarea.addEventListener('keypress', (e) => {
    e.keyCode === 13 && !e.shiftKey && e.preventDefault();
})

香草JS

1
2
3
4
5
6
7
var textarea = document.getElementById('description');

textarea.addEventListener('keypress', function(e) {
    if(e.keyCode === 13 && !e.shiftKey) {
      e.preventDefault();
    }
})

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

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