Input Textfeld bei einem Klick erweitern

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

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>

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
@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
@HorstSergio

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

0
@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
@NebraG18

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

0
@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.

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

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

JavaScript AJAX sicher?

Hey Community, Habe momentan ein User Control Panel gemacht via PHP. Jetzt wollte ich mich ein bisschen weiterbilden und kam auf die Idee eine Single Page zu machen. Die Frage ist ob AJAX genauso (un)sicher ist wie PHP. Soweit ich das verstanden habe, via AJAX, gibt der User beim Formular ja loginname und pw an, dann übergebe ich die Daten an das JavaScript und er gibt dann via POST die Daten weiter an meine PHP Datei und via Echo kann ich auf das js antworten und dann entscheiden was damit gemacht wird.

Meine Frage: Wie sicher ist das? & kann der Nutzer das JavaScript einsehen, sowie den Quellcode?

...zur Frage

Wie erstellt man eine Textarea (Textfeld) in JavaScript?

Hallo ich bin neu Bei JavaScript und wollte eine kleine html programmieren. Leider weiß ich nicht wie man sich eine Textarea in JS erstellen kann. Kann mir bitte wer helfen. Danke im Voraus.

...zur Frage

JavaScript Google Chrome Plugin?

Hey, ich möchte mir ein eigenes Google Chrome Plugin schreiben. Ich habe in der manifest.json Datei eine html-Datei als Popup verlinkt. Wie ich feststellen musste darf man in diesen Popups den Button keine onclick-events geben. Jetzt ist meine Frage ob es eine Möglichkeit gibt Daten aus Textfeldern (Die Textfelder befinden sich im Popup) in Variablen von JavaScript-Dateien zu schreiben. Ich hatte zuerst irgendwie an eine Zwischenspeicherung in z.B einem Textdokument gedacht aus dem die JavaScript-Dateien beim Start die Werte auslesen. Vllt hat ja jmd eine bessere Idee :)

Danke im voraus

...zur Frage

Sprachaufenthalt?!? Wie ... Wo ... wieviel ... usw.

Hallo zusammen ich möchte in diesen Sommerfehrien gerne einen Englischen Sprachaufenthalt machen ... habe aber keine ahnung wie das läuft !! Daher hane ich einige Fragen : 1 Wieviel kostet sowas ca. 2 Wie kann ich mich anmelden 3 Wohin könnte ich kommen 4 Wie lange kann das dauer Mir schwiren noch viele mehr Fragen ein doch fürs erste wären die genug ; ) Wen jemand sich da ausslennt oder selbst schon einmal einen solchen auenthalt gemacht hätte ... wäre ich fro um ein par infos ( müsst nicht alle Fragen beantworten ) DANKE

...zur Frage

HTML/PHP - Input-Daten von Formular auf (anderer) Seite als Text ausgeben?

Hallo Zusammen,

ich bin ziemlich neu in der PHP-Welt.

Daher jetzt schon einmal entschuldigung für evtentuelle schwammige Formulierungen ^^

Ich bin Momentan dabei eine HTML-Seite für einen befreundeten Alleinunterhalter zu schreiben.

Hierfür soll später bei Auftritten ein Tablet bereit stehen in dem die Gäste ihre Musikwünsche äußern können.

Hier gibt es 2 Text-Input-Felder, einmal mit dem Namen und einmal mit dem Musikwunsch.

HTML-Code:

<p>Dein Name:</p>
   <form name="FormularName" action="#">
        <input type="text" name="Name" size="20" required>
   </form>

<p>Dein Musikwunsch:</p>
   <form name="FormularWunsch" action="#">
        <input type="text" name="Wunsch" size="20" required><br><br><br>
        <input type="submit" value="Ausgabe" onClick="Ausgabe()">
   </form>

Diese verarbeite ich momentan in einem JavaScript zu einem Alert:

JavaScript-Code:

<script type"text/javascript">
     
    function Ausgabe() {
    alert (document.FormularName.Name.value +" w\u00fcnscht sich: "+document.FormularWunsch.Wunsch.value); }

</script>

Jetzt ist die Frage, wie ich die hier eingegeben Daten (entweder auf der selben oder auf einer zweiten Seite) in einer Liste ausgeben kann, damit der Musiker sieht was sich gewünscht wird.

Über Vorschläge und Antworten würde ich mich freuen

Gruß Fabio

...zur Frage

Was möchtest Du wissen?