zufrieden stellende Single-Line-Eingabe

Für eine Anwendung entwickeln wir in der Firma wo ich arbeite, brauchen wir einen Eingang, unterstützt das einfügen von emoticons in unserem JS-basierten web-app. Wir sind derzeit mit einem Eingang mit dem emoticon-Kurzwahlnummern (ie ': -)'), und würde gerne wechseln, einfügen von aktuellen, grafischen Bilder.

Unserem ursprünglichen plan war die Verwendung eines contenteditable <div>. Wir verwenden von Listenern für das Ereignis paste sowie die verschiedenen Tasten/Maus-Interaktionen zu gewährleisten, dass keine unerwünschten markup betritt das contenteditable (wir Streifen den text aus seiner container-tags und lassen Sie nur die image-tags, die wir fügten uns).

Aber, das problem jetzt ist, dass der div ändert, wenn Sie genügend Inhalte (dh seine Höhe steigt). Wir wollen nicht, dass dies geschieht, noch ist es akzeptabel für den text einfach ausgeblendet werden (dh einfachen overflow: hidden). Also:

Gibt es einen Weg, um das contenteditable div-Verhalten sich wie ein single-line-Eingang?

Ich möchte es am besten, wenn es eine relativ einfache Attribut/css-Eigenschaft, die ich verpasst habe, das tun, was ich will, aber wenn nötig, CSS+JS Vorschläge werden auch dankbar sein.

InformationsquelleAutor der Frage Gijs | 2011-07-26

1

So, für die Nachwelt: die einfachste Lösung ist, um Ihre Produkt-manager ändern sich die Anforderungen, so dass Sie tun können mehrzeilige Bearbeitung. Dies ist, was letztlich passiert ist, in unserem Fall.

Allerdings vor, was passiert, ich werde landete ein langer Weg bei der Schaffung einer manuell beweglichen single-line-richtext-editor. Ich wickelte es in ein jQuery-plugin, in das Ende. Ich habe keine Zeit um es zu beenden (es sind wohl bugs im IE, Firefox funktioniert am besten in Chrome und funktioniert sehr gut - die Kommentare sind spärlich und manchmal nicht sehr klar). Es nutzt Teile der Feingliedrige Bibliothek (extrahiert, weil ich nicht wollen, verlassen Sie sich auf die komplette Bibliothek), um Bildschirm-Positionen, der Auswahl, um zu testen, für die Maus-position vs. Auswahl (so können Sie die drag-Auswahl und bewegen Sie den Kasten).

Grob, es arbeitet mit 3 Elementen. Eine äußere div (das, was Sie rufen Sie das plugin auf), der bekommt overflow: hidden, und dann 2 Ebenen verschachteln drin. Die erste Ebene ist absolut positioniert, die zweite Ebene ist der eigentliche contenteditable. Diese Trennung ist notwendig, weil sonst einige Browser bieten die contenteditable absolut positionierte element grippies, ließ sich der Benutzer bewegen...

In jedem Fall, dann gibt es eine ganze Reihe von code zu bewegen, das absolut positionierte element, um in die top-element, so bewegt sich die tatsächliche contenteditable. Die contenteditable selbst hat white-space nowrap, etc. etc. um ihn zu zwingen zu bleiben, eine einzige Zeile.

Es ist auch code in das plugin, dass der Streifen alles, was nicht ist ein Bild (wie brTabellen, usw. ein. etc.) aus jedem text, der eingefügt /gezogen, in die box. Sie brauchen einige Teile dieser (wie die brs, Strippen/Normalisierung der Absätze, etc.) aber vielleicht würden Sie normalerweise wollen, halten Sie links, emstrong und/oder eine andere Formatierung.

Quelle: https://gist.github.com/1161922

InformationsquelleAutor der Antwort Gijs

Schauen Sie sich diese Antwort, die ich gerade gebucht. Dies sollte Ihnen helfen, aus:

So erstellen Sie eine HTML5 single line contentEditable tab das hört sich Enter und Esc

Hier ist das HTML-markup:

<span contenteditable="false"></span>

Hier ist die jQuery/javascript:

$(document).ready(function() {
    $('[contenteditable]').dblclick(function() {
        $(this).attr('contenteditable', 'true');
        clearSelection();
        $(this).trigger('focus');
    });

    $('[contenteditable]').live('focus', function() {
        before = $(this).text();
        if($(this).attr('contenteditable') == "true") { $(this).css('border', '1px solid #ffd646'); }
    //}).live('paste', function() {
    }).live('blur', function() {
        $(this).attr('contenteditable', 'false');
        $(this).css('border', '1px solid #fafafa');
        $(this).text($(this).text().replace(/(\r\n|\n|\r)/gm,""));

        if (before != $(this).text()) { $(this).trigger('change'); }
    }).live('keyup', function(event) {
        //ESC=27, Enter=13
        if (event.which == 27) {
            $(this).text(before);
            $(this).trigger('blur');
        } else if (event.which == 13) {
            $(this).trigger('blur');
        }
    });

    $('[contenteditable]').live('change', function() {
        var $thisText = $(this).text();
        //Do something with the new value.
    });
});

function clearSelection() {
    if ( document.selection ) {
        document.selection.empty();
    } else if ( window.getSelection ) {
        window.getSelection().removeAllRanges();
    }
}

Hoffe, das hilft jemandem!!!

InformationsquelleAutor der Antwort trgraglia

0

Können Sie ersetzen Sie diese div-mit-text-Eingabe (nach onclick-Ereignis aufgerufen wird).

Ich habe verwendet, etwas ähnliches zu dieses plugin und es funktionierte gut.

InformationsquelleAutor der Antwort shaggy
-3

mit jQuery ich habe eine .keypress-Ereignis und dann die tests für e.keyCode == 13 (return-Taste) und wenn false zurück von der Veranstaltung und die Bearbeitung ist nicht in der Lage, mehrzeilige
```
$('*[contenteditable=yes]').keypress(function(e) {
  if(e.keyCode == 13 && !$(this).data('multiline')) {
    return false;
  }
})
```
InformationsquelleAutor der Antwort Hans

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.