Avatar billede ulrik-nielsen Nybegynder
02. september 2004 - 23:30 Der er 6 kommentarer og
1 løsning

Input baggrundsfarve

Burde jeg ikke kunne gøre følgende:
<input onchange="this.bgColor = this.value;" name="test">

Lærer aldrig den syntax :D
Avatar billede roenving Novice
02. september 2004 - 23:33 #1
Næsten:

<input onchange="this.style.backgroundColor = this.value;" name="test">
Avatar billede ulrik-nielsen Nybegynder
02. september 2004 - 23:44 #2
Lækkert! Den virker!
Er der en måde at validere inputets value på? Så den ikke skifter baggrund hvis valuen ikke er en gyldig farve? Ellers får jeg:
Invalid property value
Avatar billede roenving Novice
02. september 2004 - 23:53 #3
F.eks.

<input onchange="if(this.value.match(/^#[\da-f]{3}([\da-f]{3})?$/i))this.style.backgroundColor = this.value;" name="test">

-- der _skal_ nemlig være et #-tegn forrest, men det kan du også selv sætte på, så folk kun behøver at indtaste koden:

<input onchange="if(this.value.match(/^[\da-f]{3}([\da-f]{3})?$/i))this.style.backgroundColor = '#' + this.value;" name="test">

-- og det underlige med 2*3 tegn er fordi css accepterer farvekoder på tre tegn, som så hver især fordobles, så aabbcc giver det samme som abc ...
Avatar billede ulrik-nielsen Nybegynder
03. september 2004 - 00:09 #4
Ah mange tak!!
Smid et svar!

Det eneste er dog at jeg ikke synes det virker med onchange.. fint med onfocus og onblur.. Underlig!
Avatar billede roenving Novice
03. september 2004 - 00:14 #5
onchange udløses først, når et andet element får fokus, ikke mens du taster, men da man jo alligevel validerer farve-værdien, kan man jo:

<input onkeyup="if(this.value.match(/^[\da-f]{3}([\da-f]{3})?$/i))this.style.backgroundColor = '#' + this.value;" name="test">

-- Velbekomme '-)
Avatar billede roenving Novice
03. september 2004 - 00:15 #6
-- og kom lige til at tænke på, at den kunne blive en anelse kortere:

<input onkeyup="if(this.value.match(/^([\da-f]{3}){1,2}$/i))this.style.backgroundColor = '#' + this.value;" name="test">
Avatar billede roenving Novice
03. september 2004 - 00:37 #7
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester