Forum PHP.pl > Wyświetlanie obrazka po wpisaniu linku w inpucie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wyświetlanie obrazka po wpisaniu linku w inpucie

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Fezq

28.01.2013, 21:25:33

Witam, chciałbym mieć u siebie skrypt, która spowoduje, że po wpisaniu linku do obrazka w polu input bez przeładownia strony pojawi się on pod spodem. Wiem, że trzeba do tego użyć javascript, jednak po przeszukaniu czeluści internetu nie znalazłem nic pomocnego. Proszę o pomoc i z góry dziękuję.

[HTML] pobierz, plaintext 
 
<input type="text" name="" value="WPISANY LINK"/>
<img src="WPISANY LINK"/>
 
[HTML] pobierz, plaintext

Pawel_W

28.01.2013, 23:33:22

podpinasz się za pomocą onkeyup / onkeydown / onkeypress / onchange (wybierz sobie event który najbardziej odpowiada Twoim oczekiwaniom), pobierasz .value inputa, sprawdzasz za pomocą wyrażenia regularnego czy jest poprawnym linkiem (możesz to pominąć jak chcesz), wyświetlasz obrazek (możesz wcześniej przygotować tag img, nadać mu id, i za pomocą document.getElementById('id obrazka').src zmienić jego adres

Fezq

29.01.2013, 11:37:11

Na tę chwilę mam coś takiego, powie mi ktoś jak wyświetlać ten link nie w polu textarea tylko normalnie?

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form style="margin:0;">
<p style="margin:0;">Link</p>
<input type="text" id="onkeydown" style="width:148px;" onkeydown="AnEventHasOccurred()">
<p style="margin:0;">Obrazek</p>
<textarea id="eventlog"></textarea>
</form>
<script type="text/javascript">
function AnEventHasOccurred() {
var sel = document.getElementById("selectone");
document.getElementById("eventlog").value = "" + 
'<img src="' + document.getElementById("onkeydown").value + '"/>';
}
</script>
</body>
</html> 
 
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.