webForumDet fria alternativet

javascript - byta färg på div

JavaScript

5 svar · 1 057 visningar · startad av ancii

Medlem sedan maj 20125 inlägg
Frågan#1

Hej WebForum!

Jag sitter med ett projekt där jag har ett registreringsformulär, det jag vill är att när man skriver in något eller inget i en <input type="text"> ska #div-blocket byta färg, antar att jag ska använda mig av "onblur" då jag inte vill att man ska behöva trycka på en knapp för att detta ska ske, sitter fast med själva skiftet av färgen, ett bra exempel är Flashback.

Tack på förhand!

Medlem sedan juni 20004 308 inlägg
#2

Hej, och välkommen till wF.

Om du bara vill kolla om fältet är tomt eller inte kan du göra så här.

<div id="div-blocket">
Namn <input type="text" name="namn" onblur="document.getElementById('div-blocket').style.backgroundColor=(this.value)?'green':'red';";>
</div>
Medlem sedan maj 20125 inlägg
#3

Jojoxx skrev:

Hej, och välkommen till wF.

Om du bara vill kolla om fältet är tomt eller inte kan du göra så här.

<div id="div-blocket">
Namn <input type="text" name="namn" onblur="document.getElementById('div-blocket').style.backgroundColor=(this.value)?'green':'red';";>
</div>

Tack!
Jo det är exakt så jag vill att den ska fungera men,skulle gärna vilja kolla om det tex är längre än 2
[if(username < 2){
style.backgroundColor='red']

eller kolla om emails är valida tex kolla om den innehåller '@' och '.' och att lösenorden stämmer överens.

Tack på förhand!

Medlem sedan juni 20004 308 inlägg
#4

Typ såhär:

<script>
String.prototype.isValidEmail = function(){
	return !!this.match(/^[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\@[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\.([a-zA-Z]{2,4})$/)
}
</script>

<form>
<div id="div-epost">
Epost <input type="text" name="epost" onblur="document.getElementById('div-epost').style.backgroundColor=(this.value.isValidEmail())?'green':'red';";>
</div>
<div id="div-namn">
Namn <input type="text" name="namn" onblur="document.getElementById('div-namn').style.backgroundColor=(this.value.length>2)?'green':'red';";>
</div>
<div id="div-pass">
Lösenord <input type="password" name="passwd1" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==this.form.passwd2.value)?'green':'red';";><br />
Lösenord (igen) <input type="password" name="passwd2" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==passwd1.value)?'green':'red';";>
</div>
</form>
Medlem sedan maj 20125 inlägg
#5

Jojoxx skrev:

Typ såhär:

<script>
String.prototype.isValidEmail = function(){
	return !!this.match(/^[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\@[a-zA-Z0-9]+([\.\-\_]{1}[a-zA-Z0-9]+)*\.([a-zA-Z]{2,4})$/)
}
</script>

<form>
<div id="div-epost">
Epost <input type="text" name="epost" onblur="document.getElementById('div-epost').style.backgroundColor=(this.value.isValidEmail())?'green':'red';";>
</div>
<div id="div-namn">
Namn <input type="text" name="namn" onblur="document.getElementById('div-namn').style.backgroundColor=(this.value.length>2)?'green':'red';";>
</div>
<div id="div-pass">
Lösenord <input type="password" name="passwd1" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==this.form.passwd2.value)?'green':'red';";><br />
Lösenord (igen) <input type="password" name="passwd2" onblur="document.getElementById('div-pass').style.backgroundColor=(this.value&&this.value==passwd1.value)?'green':'red';";>
</div>
</form>

Ja precis! Tack så jätte mycket för din tid och hjälp!!

Medlem sedan juni 20004 308 inlägg
#6

Så lite :) Glöm inte att markera lösningstråden.

242 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
117 ms — deklarationer (db)
0 ms — hämta statistik (cache)
123 ms — hämta tråd, inlägg och bilagor (db)
116 ms — ändringar (db)