it-swarm.com.de

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

Derzeit, wenn die Person drückt enter Innerhalb des Textbereichs wird das Formular gesendet.
Gut, das will ich.

Aber wenn sie tippen shift + enterIch möchte, dass das Textfeld in die nächste Zeile wechselt: \n

Wie kann ich das in JQuery oder einfachem JavaScript so einfach wie möglich machen?

125
TIMEX

Besser einfachere Lösung verwenden:

Die folgende Lösung von Tim ist besser. Ich schlage vor, sie zu verwenden: https://stackoverflow.com/a/6015906/4031815


Meine Lösung

Ich denke, Sie können so etwas tun ..

BEARBEITEN: Der Code wurde so geändert, dass er unabhängig von der Position des Einfügemarke funktioniert

Der erste Teil des Codes besteht darin, die Caret-Position zu ermitteln.

Ref: Wie erhält man von Anfang an die Position der Caret-Spalte (nicht der Pixel) in einem Textbereich in Zeichen?

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

Und dann den textarea-Wert entsprechend ersetzen, wenn Shift + Enter zusammen senden Sie das Formular, wenn Enter wird alleine gedrückt.

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

Hier ist eine Demo

72
Jishnu A P

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);
133
Tim Down

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.

36
Matt Goodwin

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
    }
});
16
Liam Hall

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

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

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

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

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
    }
  }
})
1
Hsinhsin Hung

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();
    }
})
0
Jaco Ahmad

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"
0
Abdallah Okasha

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>
0
Liam