[JS] Formularfeld einlesen und als Link ausgeben

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
peymedia

peymedia hat kostenlosen Webspace.

10:48, 16.3.2014
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
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

12:03, 16.3.2014

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

~~m******e~~

22:22, 16.3.2014

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.

c143

c143 hat kostenlosen Webspace.
16:39, 17.3.2014
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
~~m******e~~
18:02, 17.3.2014

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

c143

c143 hat kostenlosen Webspace.

18:13, 17.3.2014

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

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city