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>
3

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

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

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

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

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

3

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

Access kann man mit einem Mouseover ein Textfeld aufklappen lassen?

Ich habe mir ein Suchformular erstellt welches in mehreren Textfeldern (Der Datentyp des Feldes ist: Memo) nach Wörtern suchen kann.

Funktioniert auch super, nur sind meine Zeilen in dem Endlosformular zu schmal um den zum Teil umfangreichen Text darstellen zu können.

Jetzt war meine Idee einzeilige Textfelder zu nehmen und die bei einem Mouseover aufzuklappen oder wie man es in HTML macht in einem Container über das Formular zu legen.

Gibt es eine solche Möglichkeit in Access?

Vielen Dank schon mal.

...zur Frage

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

MAILTO in JavaScript?

Hallo,

Ich möchte gerne eine Email verschicken, also nach Knopfdruck(Buttonclick) soll das Mailprogramm geöffnet werden. Es soll bereits der Empfänger, der Betreff und ein Teil des Bodys bzw. des Inhaltes gefüllt werden. Ich habe die Mailto- Funktion gefunden in Html. Aber diese ist mir eine zu schlechte Lösung da ich dort alles bereits im html Code einfügen muss. Hat da jemand eine gute Lösung?

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

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

Was möchtest Du wissen?