kostenloser Webspace werbefrei: lima-city


[JS] Formularfeld einlesen und als Link ausgeben

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    peymedia

    Kostenloser Webspace von peymedia

    peymedia hat kostenlosen Webspace.

    Hallöchen,
    ich suche einen Code, um den Inhalt eines Textfeldes auszulesen (name="textfeld") und anschließend in einen Link zu verwandeln. Das ganze in Echtzeit, also Ohne Formular absenden o.s.

    Beispiel: Input-Feld: Testtext -> URL= http://meinedomain.tld/?q=Testtext

    Hat jemand von euch sowas?

    Liebe Grüße,
    ​Marcel
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. <html>
    	<head>
    		<script type="text/javascript">
    			window.onload = function(){
    				document.getElementById('button').addEventListener('click', texttolink);
    			}
    			
    			function texttolink(){
    				var textfeld = document.getElementById('textfeld');
    				document.getElementById('container').innerHTML = 'http://meinedomain.tld/?q='+textfeld.value;
    			}
    		</script>
    	</head>
    	<body>
    		<input type="text" id="textfeld"/>
    		<button id="button">Submit</button>
    		<div id="container"></div>
    	</body>
    </html>


    Sowas?
  4. m******e

    c143 schrieb:
    [ code ] ... [ /code ]Sowas?
    Aus 2 Gründen wohl nicht so ganz, weil:

    peymedia schrieb:
    ich suche einen Code, um den Inhalt eines Textfeldes auszulesen (name="textfeld") und anschließend in einen Link zu verwandeln.
    Das ganze in Echtzeit, also Ohne Formular absenden.

    Vielleicht wäre dies ein Lösungsansatz?
    <html><head>
    <script type="text/javascript">
    function texttolink() {var adress = 'https://google.de/#q=',
    In = d.getElementById('text_input'), T = d.getElementById('text_output'),
    L = d.getElementById('link_output'), result = adress + In.value;
    if (In.value == '') { T.innerHTML = ''; L.innerHTML = '' } else {
    T.innerHTML = result; L.innerHTML = '<a href="' + result + '">' + result + '</a>'}
    if(i>0){aktiv = window.setTimeout("texttolink()", 100)} else {window.clearTimeout(aktiv)}}
    var i = 0, d = document, bla=function(){i++;texttolink()}
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="text_input" onmouseover="bla()" onkeydown="bla();" onkeyup="bla()" />
    <input type="reset" onclick="bla()" />
    </form>
    <br />
    Ausgabe als Text:
    <div id="text_output"></div>
    <br />
    Ausgabe als Link:
    <div id="link_output" onmouseover="i=0"></div>
    </body>
    </html>
    >Beispiel <

    Etwas umfangreich, behebt jedoch die meisten der Fehler von focus/blur, copy/paste per tastatur/mouse, usw.
  5. Ohne Formular und per Echtzeit hiess für mich ohne neuladen der Seite, aber das wär ja PHP, deshalb will er es wahrscheinlich so, ja. Hätte er eben den Button gelöscht und den EventListener auf change des input feldes gewechselt. :)

    Und an den Link hatte ich so auch nicht gedacht, aber das ist ja auch nur eine Feinheit, aber deine Lösung ist sicher besser als meine, hab das einfach so mal als Orientierung für ihn hingeklatscht. Muss er was ändern, lernt er ja mehr, als einfach nur zu kopieren. :)

    Sieht gut aus, nur finde ich die Formatierung für einen Anfänger total unübersichtlich und die Eventlistener solltest du vom HTML trennen. Deshalb hier meine überarbeitete Lösung:

    <html>
    	<head>
    		<script type="text/javascript">
    			window.onload = function(){
    				textfeld = document.getElementById('textfeld');
    				textfeld.addEventListener('keyup', texttolink);
    			}
    			
    			function texttolink(){
    				document.getElementById('nurtext').innerHTML = 'http://meinedomain.tld/?q='+textfeld.value;
    				document.getElementById('link').innerHTML = '<a href="'+textfeld.value+'">http://meinedomain.tld/?q='+textfeld.value+'</a>';
    			}
    		</script>
    	</head>
    	<body>
    		<input type="text" id="textfeld"/>
    		<div id="nurtext"></div>
    		<div id="link"></div>
    	</body>
    </html>


    Beitrag zuletzt geändert: 17.3.2014 16:46:17 von c143
  6. m******e

    c143 schrieb:
    hab das einfach so mal als Orientierung für ihn hingeklatscht
    .. und ne nette Vorlage für mich geschaffen; Vor- bzw. Zuarbeit hat ja auch was :)

    Muss er was ändern, lernt er ja mehr, als einfach nur zu kopieren. :)
    Jepp, unbesehen. Allerdings hatten wir alle auch mit Beispielen angefangen, quasi als Anschauungsmaterial. Wer sich erst einmal an funktionierenden Beispielen - bis hin zum völligen kaputtfriemeln - herrlich austoben konnte, lernt ganz automatisch dazu; alles eine Frage der Zeit. Gut dabei ist, wenn man die Scheu daran verliert, sich daran selbst zu versuchen.

    Sieht gut aus, nur finde ich die Formatierung für einen Anfänger total unübersichtlich
    Nicht nur Du. :)
    Aber das Ergebnis der ganzen durchlaufenen Szenarien ist dann doch schon sehr kurz gefasst. Selbstverständlich hatte ich den Eventlistener ebenfalls ausgiebig getestet, was ich aber schließlich verwarf. Wohlmöglich ist das alles mit jQuery noch viel einfacher zu realisieren, was jedoch - gerade für einen JS-Beginner - noch viel schwieriger nachvollziehbar ist.

    Auch bei deiner überarbeiteten Lösung stehen drei Punkte offen:
    - rechtsklick ins Textfeld > (Content) einfügen oder löschen aktualisiert den Link leider nicht
    - nach dem löschen (alles) bleibt
    http://meinedomain.tld/?q=
    trotzdem sichtbar
    - beim festhalten von tasten (Beispiel mmmmmm) wird nicht sofort aktualisiert, sondern erst nach dem loslassen

    Wohlmöglich gibt es dafür ^ Lösungen? Denn dein JS ist ja auch sehr kurzgehalten. ;)
    Sollte der TE Interesse daran zeigen meine Lösung zu verstehen, bringe ich den Quelltext der Zeilen 3-9, und der Zeile 22 gerne näher (was es denn so macht).

    Dein Quelltext ist übrigens so formatiert besser lesbar:
    [code=jshtml]

    Geht seit neuestem. :)

    Beitrag zuletzt geändert: 17.3.2014 18:04:58 von menschle
  7. Ah, an die Fehler hab ich gar nicht gedacht, danke. Hier meine Lösung. Und danke für den neuen Codetag, bin momentan nicht so aktiv. :)

    <html>
        <head>
            <script type="text/javascript">
                window.onload = function(){
                    textfeld = document.getElementById('textfeld');
                    nurtext = document.getElementById('nurtext');
                    link = document.getElementById('link');
                   
                    textfeld.addEventListener('input', texttolink);
                }
                 
                function texttolink(){
                    if(textfeld.value == ''){
                        nurtext.innerHTML = '';
                        link.innerHTML = '';
                    }else{
                        nurtext.innerHTML = 'http://meinedomain.tld/?q='+textfeld.value;
                        link.innerHTML = '<a href="'+textfeld.value+'">http://meinedomain.tld/?q='+textfeld.value+'</a>';
                    }
                }
            </script>
        </head>
        <body>
            <input type="text" id="textfeld"/>
            <div id="nurtext"></div>
            <div id="link"></div>
        </body>
    </html>


    EDIT: Ich wurde gerade von menschle per PM angeschrieben, dass mein Script bei rechtsklick paste noch nicht funktionieren würde. Das habe ich jetzt mit dem EventListener input gelöst.

    Beitrag zuletzt geändert: 18.3.2014 19:39:04 von c143
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!