Wie erkenne ich "shift + enter" und erstelle eine neue Zeile im Textbereich?

Einfache und elegante Lösung:

Zuerst drücken Enter Innerhalb eines Textbereichs wird das Formular nur gesendet, wenn Sie ein Skript dafür haben. Das ist das Verhalten, das der Benutzer erwartet, und ich würde empfehlen, es nicht zu ändern. Wenn Sie dies jedoch tun müssen, ist es am einfachsten, das Skript zu finden, das erstellt wird Enter Senden Sie das Formular und ändern Sie es. Der Code hat so etwas wie

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

... und Sie könnten es einfach ändern

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

Wenn Sie andererseits aus irgendeinem Grund keinen Zugriff auf diesen Code haben, müssen Sie die folgenden Schritte ausführen, damit er in allen gängigen Browsern funktioniert, auch wenn sich das Caret nicht am Ende des Texts befindet:

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

Code:

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

Die meisten dieser Antworten machen dies zu kompliziert. Warum versuchst du es nicht so?

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

Kein Durcheinander mit Caret-Position oder Schublinien-Unterbrechungen in JS. Grundsätzlich kann die Funktion nicht ausgeführt werden, wenn die Umschalttaste gedrückt wird. Die Eingabetaste kann dann ihre normale Funktion ausführen.

Warum nicht gerade?

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

Verwenden Sie das Hotkeys jQuery plugin und diesen Code

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

Hier ist eine AngularJS-Lösung, die ng-keyup verwendet, wenn bei AngularJS dasselbe Problem auftritt.

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

Ich fand diesen Thread auf der Suche nach einer Möglichkeit, Shift + jede Taste zu kontrollieren. Ich habe andere Lösungen zusammengefügt, um diese kombinierte Funktion so zu gestalten, dass ich meine Anforderungen erfüllt. Ich hoffe es hilft jemand anderem. 

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

Ich benutze div, indem ich contenteditable true anstelle von textarea hinzufüge.

Hoffnung kann dir helfen.

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

Falls sich noch jemand fragt, wie dies ohne jQuery zu tun ist.

HTML

<textarea id="description"></textarea>

Javascript

const textarea = document.getElementById('description');

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

Vanille JS

var textarea = document.getElementById('description');

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

wenn Sie die ng-keyup-Direktive in angleJS verwenden, senden Sie nur eine Nachricht, wenn Sie die Enter-Taste drücken. Shift+Enter nimmt nur eine neue Zeile an.

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

Für Benutzer von ReactJS ES6 ist dies der einfachste Weg

shift + enter Neue Zeile

enter verstopft

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>