[FRAGE] onkeypress

[pfcrime]

Hi, ich bin Anfänger was js angeht.

Ich möchte mit onkeypress ein bild erscheinen lassen.
wie bekomme ich das hin?

 

[dbarthel]

sollte so funktionieren:

<div id="demo"></div>
<input type="text" onkeypress="myFunction()">

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "<img src='mein-bild.jpg' alt='bild'>";   
}
</script>

 

[pfcrime]

ok aber das ist jetzt in html eingebunden oder?
wie muss ich das schreiben wenn ich es in eine extra js datei auslagern möchte?

 

[dbarthel]

ok aber das ist jetzt in html eingebunden oder?

ja

- - - Aktualisiert - - -

wie muss ich das schreiben wenn ich es in eine extra js datei auslagern möchte?

so:

<script src="./keyup.js"></script>
<div id="demo"></div>
<input type="text" onkeypress="myFunction()">

und die "keyup.js" sieht dann so aus:

function myFunction() {
 document.getElementById("demo").innerHTML = "<img src='mein-bild.jpg' alt='bild'>";   
}

 

[pfcrime]

ok das hat geklappt aber ich habe gedacht mit "onkeypress" macht es die funktion nur so lange eine taste gedrückt wird?

oder geht das nur im zusammenhang mit "onkeyup"?

 

[j-l-n]

ich habe gedacht mit "onkeypress" macht es die funktion nur so lange eine taste gedrückt wird?

Nein, nein, nein - falsch. Das Event feuert bei Tastendruck - die Funktion wird ein mal ausgeführt, nicht "bis die Taste losgelassen wird"...
Javascript events ? Ereignisse und Event Handler | mediaevent.de

 

[pfcrime]

ok das heißt ich muss noch eine Funktion schreiben die das Bild mit ounkeyup wieder verschwinden lässt? ich würde das jetzt mit neu laden der Seite machen oder gibt es da eine andere Möglichkeit?

 

[miniA4kuser]

ok das heißt ich muss noch eine Funktion schreiben die das Bild mit ounkeyup wieder verschwinden lässt?

Genau.

An Beitrag #2 angelehnt also so:

<div id="demo"></div>
<input type="text" onkeypress="myFunction()" onkeyup="mySecondFunction()">

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "<img src='mein-bild.jpg' alt='bild'>";   
}
function mySecondFunction() {
 document.getElementById("demo").innerHTML = "";   
}
</script>

 

[pfcrime]

Ah Perfekt vielen Dank!

 

[miniA4kuser]

Gern geschehn

 

[kkapsner]

Ich würde ja sowas nicht mit innerHTML machen, sondern das <img> schon von Anfang an im HTML haben, mit CSS ausblenden (display: none) und dann mit JS nur das .style.display auf "inline" setzen. Dann wird das Bild sofort angezeigt und muss nicht erst geladen werden.

PS: onkeypress feuert jedes mal, wenn ein Buchstabe geschrieben werden würde. Also auch öfters, wenn man die Taste gedrückt hält.

 

[dbarthel]

Ich würde ja sowas nicht mit innerHTML machen, sondern das <img> schon von Anfang an im HTML haben, mit CSS ausblenden (display: none) und dann mit JS nur das .style.display auf "inline" setzen. Dann wird das Bild sofort angezeigt und muss nicht erst geladen werden.

sehr gute Idee, ich dachte nur das würde ggf. für den Frager zu schwierig sein.

 

[kkapsner]

Ich finde beide Ansätze haben den gleichen Schwierigkeitsgrad.