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?
Die folgende Lösung von Tim ist besser. Ich schlage vor, sie zu verwenden: https://stackoverflow.com/a/6015906/4031815
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.
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
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>