Wie, um text-Eingabefeld veränderbare (wie textarea) durch ziehen der rechten unteren Ecke mit jQuery?

Ich würde gerne (am besten in jQuery) normale text-Eingabe-Feld, das angeklickt werden kann und gezogen von der rechten unteren Ecke (wie z.B. Texteingabefelder haben in Chrome) und das ändern der Fenstergröße durch Benutzer ?

Finde keine jQuery-plugin bereits die Umsetzung dieser. Kann jemand mir Tipp wenn etwas vorhanden ist, wie kann oder könnte es leicht durchgeführt werden ?

Vielen Dank im Voraus.

EDIT: ich möchte zu der Größe veränderbar sein, ebenso wie textarea ist in Chrom...

  • Möchten Sie für <input type="text" /> in der Größe veränderbar sein? Oder möchten Sie die <textarea> Verhalten von Chrome und Firefox repliziert auf allen Browsern?
  • Sorry für meine schlechte Erklärung. Ich will <input type="text" /> in der Größe veränderbar sein. Beispiel für dieses Verhalten war textarea in Chrom....
  • Ändern der Größe eines <input type="text" /> element ist sinnlos, Sie nicht magisch konvertieren Sie es in ein textarea, es werde weiterhin ein single-line-element. Es sei denn, Sie sind auf der Suche für die horizontale Erweiterung, die könnte nützlich sein in einigen Fällen.
  • Ja, ich bin auf der Suche für die horizontale Ausdehnung....
InformationsquelleAutor Frodik | 2011-12-20
  1. 14

    Brauchen Sie nicht, jQuery, um diese zu bewältigen. Was Sie brauchen, ist css.

    #yourTextInput{
resize:both;
}

    So können Sie die Texteingabe die option "Größe anpassen" auf der rechten

    • Wow, vielen Dank, so eine einfache und elegante Lösung. Ich wusste nicht, über diese CSS-Funktion. Danke.
    • Du bist willkommen, gerne helfen
    • Hat sich etwas geändert in den Spezifikationen, der Größe der CSS-Funktion ? Es funktioniert nicht mehr auf input-Elemente, Beispiel: jsfiddle.net/cbw7q/1 Jemand hat irgendwelche Informationen darüber ?
    InformationsquelleAutor XepterX
  2. 2

    Anno 2016 es ist ein bisschen komplizierter. Sie müssen wickeln Sie die <input> in einem "inline-block", dass Sie in der Größe veränderbar gemacht:

    CSS:

    .resizable-input {
    /* make resizable */
    overflow-x: hidden;
    resize: horizontal;
    display: inline-block;

    /* no extra spaces */
    padding: 0;
    margin: 0;
    white-space: nowrap;
  
    /* default widths */
    width: 10em;
    min-width: 2em;
    max-width: 30em;
}

/* let <input> assume the size of the wrapper */
.resizable-input > input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* add a visible handle */
.resizable-input > span {
    display: inline-block;
    vertical-align: bottom;
    margin-left: -16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
    cursor: ew-resize;
}

    HTML:

    <span class="resizable-input"><input type="text" /><span></span></span>

    • Wenn ich die Spanne Linie zu Hello <span class="resizable-input"><input type="text" /><span> World es verhält sich nicht so wie ich es haben möchte (zumindest nicht mit Firefox). Konkret habe ich nur sehen, dass er "W" von Welt, erscheint mit das Bild ziehen. Ist es möglich, die Größe zu "drücken" und "ziehen" die inline-Elemente Folgen?
    • wir danken Ihr für die Mitteilung von mir! Es war ein Tippfehler: die letztere <span> sollte </span>.
    • Danke! Ich sollte gefangen haben, dass mich. Verschwommen sehen 🙂 Und danke für die Antwort selber. Ich habe eine Anwendung, die ich nun in der Verwendung dieser.
    • Der erste post war eigentlich richtig, und dann mehrere "typo" - Korrekturen verloren die 2. span-element. ist jetzt behoben.
    • Ich danke Ihnen sehr!
    InformationsquelleAutor kay
  4. 0

    Machte ich eine variation auf kay ' s Antwort, mit dem pseudo-element ::after anstelle einer zweiten Spanne. kurz gesagt:

    .resizable-input { ... }
.resizable-input > input { ... }
.resizable-input::after { ... }
/* the last one used to be .resizable-input > span { ... } */

    mit html nur:

    <span class="resizeable-input"><input type="text"/></span>

    Siehe vollständige code und sehen es in Aktion hier:
    https://jsfiddle.net/ElMoonLite/qh703tbe/

    Ebenfalls Hinzugefügt input { padding-right: 0.5em; } so können Sie noch die Größe ändern, wenn es das Wert ist, voll von text.

    Scheint immer noch zu arbeiten, im Jahr 2019 in Chrom.

    In Rand-die Größe scheint nicht zu funktionieren (aber sonst ok aussieht (graceful degradation)). Noch nicht getestet, andere Browser noch nicht.

    InformationsquelleAutor MoonLite
Schreibe einen Kommentar