Input Textfeld bei einem Klick erweitern

...komplette Frage anzeigen

2 Antworten

Die wäre eine Möglichkeit: Hier wird das input-Element gegen ein Textarea-Element ausgetauscht. Der Inhalt des Elements wird übergeben, damit nichts verloren geht.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
    <input id="inputText" type="text" class="inputTextarea expand" />
    <input type="button" id="buttonExpandReduce" value="Expand" onClick="expandReduce('expand');" />

    <script>
    var expandReduce = function(param) {
        var $input = $('.inputTextarea');
        var $button = $('#buttonExpandReduce');
        if(param == 'expand') {
            var value = $input.val();
            $button.attr('onClick','expandReduce(\'reduce\');').attr('value','Reduce');
            $input.replaceWith('<textarea cols="30" id="textareaText" class="inputTextarea" onClick="expandReduce(\'reduce\');" rows="10">' + value + '</textarea>');
        }else{
            var value = $input.html();
            $button.attr('onClick','expandReduce(\'expand\');').attr('value','Expand');;
            $input.replaceWith('<input id="inputText" type="text" class="inputTextarea" value="' + value + '" />');
        }
    }
    </script>
</body>
</html>
NebraG18 31.01.2013, 09:17

Sehr gute Richtung :)

Aber nach else muss

var value = $input.val();

nicht

var value = $input.html();

sonst ließt er das Feld nicht richtig aus oder?

0
HorstSergio 31.01.2013, 09:20
@NebraG18

Nein, denn die Methode "val()" funktioniert nicht bei einer Textarea, da der Inhalt der Textarea zwischen den Textarea-Tags steht und nicht wie beim input-Element im Value-Attribut. Deshalb wird mit "html()" der Inhalt des Textarea-Elements ausgelesen.

Hier übrigens eine kurze vereinfachte Version. Statt einem Textareat-Element wird das input-Element verlängert

<input id="myText" size="30" type="text" onFocus="resizeInput();" onBlur="resizeInput();" class="myInput" />    
    <script>
    var resizeInput = function() {
        var myText = document.getElementById('myText');
        (myText.getAttribute('size') == '70' ? myText.setAttribute('size','30') : myText.setAttribute('size','70') );
    }
    </script>
0
NebraG18 31.01.2013, 09:40
@HorstSergio

Hm ok aber mit value.html() funktioniert es nicht aber mit value.val() geht es :D auf jedenfall viele dank ;)

0
NebraG18 31.01.2013, 09:45
@HorstSergio

Das mit dem erweitern wäre die schönste Lösung nur leider ist da dieses Platzproblem, gibts da etwas das so unkompliziert funktioniert wie das vergößern aber auf einer anderen Bildschirmebene quasi? Sodass der restliche Content nicht verschoben wird?

0
HorstSergio 31.01.2013, 10:10
@NebraG18

Anscheinend kann jQuery auch mit val() den Content aus einer Textarea auslesen. Also ist das in Ordnung wie du es machst

0
HorstSergio 31.01.2013, 10:23
@NebraG18

Ich habe "Quick&Dirty" etwas zusammengeschrieben. Hier verschiebt sich der rechte Text nicht, weil das Input Feld eine Ebene(z-index) höher liegt.

<html>
<head>

</head>
<body>
    <div style="width:700px;">
        <div style="width:400px;float:left;">
            <input id="myText" size="30" type="text" onFocus="resizeInput();" onBlur="resizeInput();" class="myInput" style="z-index:1;position:relative;"/>    
        </div>
        <div style="width:300px;float:right;">
            <div id="textbox" style="z-index:0;position:relative;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>
    <script>
    var resizeInput = function() {
        var myText = document.getElementById('myText');
        (myText.getAttribute('size') == '70' ? myText.setAttribute('size','30') : myText.setAttribute('size','70') );
    }
    </script>
</body>
</html>
0

Wieso willst du ein input-Textfeld erweitern, wenn eh nur eine Zeile reinpasst? Oder soll es einfach nur größer werden? Also n bissl breiter, höher und etwas größere Schrift.

Bitte "erweitern" mal klarer definieren.

NebraG18 31.01.2013, 08:17

Ich möchte in ein einzeiliges Inputfeld (In das aber sehr viele Zeichen passen) reinklicken, dann geht ein z.B. Javascript programmiertes minipopup auf (muss ja nicht gleich ein neues Browserfenster sein) in dem ich einfach mehr Zeilen habe um den Text zu bearbeiten, es geht hier um Speicherung in einer SQL DB von daher ist es nicht wichtig das im Einzeiligen gut lesen zu können aber beim Editieren wäre es schön ein größeres Eingabefeld zu haben da ich das Urssprüngliche nicht vergrößern kann aufgrund von Platz-Problemen

0
NebraG18 31.01.2013, 09:04
@NebraG18

Sagen wir es mal so:

Das ist die größe des Eingabefeldes ca.:

|...................................|

jetzt soll sich beim Klick in dieses Feld einfach so ein Overlay öffnen wo das Textfeld etwa solang ist:

|..................................................................................................................|

klicke ich iwo in den Bildschirm schließt sich das overlay und der Text ist in dem Urspünglichen Inputfeld

0

Was möchtest Du wissen?