Verhindert Zeilen- / Absatzumbrüche in contentEditable

Wenn mit contentEditable in Firefox, gibt es eine Möglichkeit zu verhindern, dass die Benutzer einfügen von Absatz-oder Zeilenwechsel mit enter oder shift+enter?

InformationsquelleAutor der Frage Daniel Cassidy | 2009-01-08

58

Können Sie fügen Sie einen Ereignis-handler für das keydown-und keypress-Ereignis für das contentEditable-Feld und das Ereignis abzubrechen, wenn der keycode identifiziert sich selbst als Sie die EINGABETASTE (oder shift+enter).

Dies wird deaktivieren Sie die enter/shift+enter vollständig, wenn sich der Fokus in der contentEditable Feld.

Wenn die Verwendung von jQuery, so etwas wie:
```
$("#idContentEditable").keypress(function(e){ return e.which != 13; });
```
...die wird false zurückgeben und beenden Sie die keypress-Ereignis auf Sie die EINGABETASTE.

InformationsquelleAutor der Antwort kamens
15

Dies ist möglich mit Vanilla JS, mit dem gleichen Aufwand:
```
document.getElementById('idContentEditable').addEventListener('keypress', function(evt) {
    if (evt.which === 13) {
        evt.preventDefault();
    }
});
```
Sollten Sie nicht verwenden jQuery für die meisten einfachen Dinge. Vielleicht möchten Sie auch zu verwenden "key" anstelle von "was": https://developer.mozilla.org/en-US/docs/Web/Events/keypress

InformationsquelleAutor der Antwort luschn
14

Fügen Sie die folgende CSS-Regel zu verstecken Zeilenumbrüche. Dies ist nur eine Stil-Einstellung, sollten Sie einige event-Handler, um verhindern einfügen von Zeilenumbrüchen:
```
.your_editable br {
    display: none
}
```
InformationsquelleAutor der Antwort Hi I'm Frogatto
7

Wenn Sie mit JQuery-framework, können Sie es mit der auf Methode, mit denen Sie das gewünschte Verhalten auf alle Elemente, selbst wenn diese Hinzugefügt wird, in letzter Zeit.
```
$(document).on('keypress', '.YourClass', function(e){
    return e.which != 13; 
});   
```
InformationsquelleAutor der Antwort Patrick Desjardins

$("#idContentEditable").keypress(function(e){ return e.which != 13; });

Vorgeschlagenen Lösung durch Kamens funktioniert nicht in Opera, sollten Sie Anhängen Ereignis zu dokumentieren, statt.

/**
 * Pass false to enable
 */
var disableEnterKey = function(){
    var disabled = false;

    //Keypress event doesn't get fired when assigned to element in Opera
    $(document).keypress(function(e){
        if (disabled) return e.which != 13;
    });                 

    return function(flag){
        disabled = (flag !== undefined) ? flag : true;
    }
}();

InformationsquelleAutor der Antwort

4

weitere option ist es, Pausen eingegeben werden, aber entfernen Sie Sie deaktivieren. dies hat den Vorteil, den Umgang mit dem eingefügten Inhalt. Ihre Nutzer werden es entweder lieben oder hassen (je nach Benutzer).
```
function handle_blur(evt){
  var elt=evt.target; elt.innerText=elt.innerText.replace(/\n/g,' ');
}
```
dann im html:
```
<span onblur="handle_blur(event)" contenteditable>editable text</span>
```
InformationsquelleAutor der Antwort amwinter
4

Andere als Zugabe Zeilenumbrüche der browser fügt die zusätzlichen tags und styles (wenn Sie text einfügen, der browser fügt auch die eingefügten text-style).

Den code unten deckt es alle.
- Wenn Sie die EINGABETASTE drücken, werden keine Zeilenumbrüche eingefügt werden.
- Wenn Sie text einfügen, alle Elemente Hinzugefügt werden, die vom browser entfernt werden aus dem text.
```
$('[contenteditable]').on('paste', function(e) {
    //strips elements added to the editable tag when pasting
    var $self = $(this);
    setTimeout(function() {$self.html($self.text());}, 0);
}).on('keypress', function(e) {
     //ignores enter key
     return e.which != 13;
});
```
Klicken Sie hier für ein live-Beispiel

InformationsquelleAutor der Antwort Maor Oz
2

Wenn Sie möchten, richten sich an alle, die contentEditable-Felder verwenden
```
$('[contenteditable]').keypress(function(e){ return e.which != 13; });
```
InformationsquelleAutor der Antwort Terrillo Walls

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.