---
title: "Ändra färg på input-ruta - har lite problem med det"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/175749-ändra-färg-på-input-ruta-har-lite-problem-med-det"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "haider"
published: "2008-12-08T10:37:31.000Z"
updated: "2008-12-21T20:15:44.000Z"
replies: 20
views: 819
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/175749-ändra-färg-på-input-ruta-har-lite-problem-med-det"
---

# Ändra färg på input-ruta - har lite problem med det

_Sida 1 av 2._

## #1 — haider, 2008-12-08T10:37Z

Tjena,

Jag har ett script enligt följande.
function changecolor(id)
{
	document.getElementById(id).style.backgroundColor="#FF8282";
}
\</script\>

Följande skriver jag för att trigga igång scriptet:
onKeyDown="changecolor(this.id)" onChange="changecolor(this.id)"

Problemet är följande; Även om jag trycker ctrl, tex för att kopiera (ctrl c förstås) så blir den röd. Jag vill att den bara ska reagera när jag verkligen skriver in något.
Ligger problemet i onChange eller?

Permalänk: https://www.webforum.nu/p/175749

## #2 — Danne V, 2008-12-08T10:52Z

onfocus?

(kör du xhtml ska det väl heller inte finnas några stora bokstäver, va?)

Permalänk: https://www.webforum.nu/p/2158786

## #3 — voigtann1, 2008-12-08T11:18Z

```
function changecolor(id)
{
	var el = document.getElementById(id);
	if(el.value.length>0)
	{
		document.getElementById(id).style.backgroundColor="#FF8282";
	}
}
```

Om längden är större än 0 i textboxen borde väl fungera?

Permalänk: https://www.webforum.nu/p/2158790

## #4 — haider, 2008-12-08T11:19Z

Hmm, vad menar du nu Danne?
Med stora bokstäver menar du att man ska skriva onchange och inte onChange eller?

Och hur kommer onfocus in i bilden? Menar du att när \<input\> hamnar i fokus så ska den se om något ändras? Kan testa, men kommer den att skilja en knapptryckning om det är ctrl eller något annat?

Permalänk: https://www.webforum.nu/p/2158791

## #5 — Danne V, 2008-12-08T14:12Z

> **haider skrev:**
>
> Hmm, vad menar du nu Danne?
> Med stora bokstäver menar du att man ska skriva onchange och inte onChange eller?
> 
> Och hur kommer onfocus in i bilden? Menar du att när \<input\> hamnar i fokus så ska den se om något ändras? Kan testa, men kommer den att skilja en knapptryckning om det är ctrl eller något annat?

Öh... jag är nog ute o hojar.   :r 
Kan inte mycket om js alls.
Jo alltså: kör man xhtml så ska det inte finnas några stora bokstäver alls i källkoden (onFocus ska vara onfoucs) men det kanske inte webbläsarna bryr sig om...

Och att javascriptet ska exekveras när \<input\> hamnar i focus alltså.

Men jag fattade nog ganska fel och ber om ursäkt ifall mitt svammel snarare leder till förvirring än hjälp....

Permalänk: https://www.webforum.nu/p/2158801

## #6 — StefanBergfeldt, 2008-12-08T14:51Z

du får helt enkelt reagera på onkeydown (eller onkeyup) och kolla vilken tangent som tryckts innan du ändrar färg

Permalänk: https://www.webforum.nu/p/2158805

## #7 — Troxy, 2008-12-08T15:07Z

Räcker det inte med onchange? Det triggas ju varje gång värdet ändras, dvs. när man skriver något.

Permalänk: https://www.webforum.nu/p/2158809

## #8 — StefanBergfeldt, 2008-12-08T15:08Z

Nej, bara när rutan tappar fokus

Permalänk: https://www.webforum.nu/p/2158810

## #9 — Troxy, 2008-12-08T15:13Z

Ja ser man på, det trodde jag inte.  :e 

> The change event occurs when a control loses the input focus and its value has been modified since gaining focus.

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents>

Permalänk: https://www.webforum.nu/p/2158811

## #10 — haider, 2008-12-08T17:36Z

Danne: det är lugnt. Ibland behövs såna inlägg för att få en att undra om man själv är tokig eller nåt ;)

Stefan: Ditt förslag är nog det enda tänkbara. Men då spelar det alltså ingen roll om man använder onkeydown eller onchange eller vilket som, bara javascriptet gör kontrollen om hurvida det är ett tecken man knappade in eller om det var ctrl eller något annat som inte är ett tecken.

voigtann1: såg att jag hade missat ditt inlägg.
Vad menar du med "Om längden är större än 0 ..."?
Om textrutan innehåller mer än 0 tecken? Den innehåller ju en mängd tecken, men om jag bara trycker ctrl så blir den röd. Så det är ju snarare att kolla hur långt tecknet som man knappade i är (det är ju 1, och större än 0).

alltså: kan man i kontrollen utföra en check om det man knappade in är 1 tecken långt eller 0? För då har vi lösningen :)

Permalänk: https://www.webforum.nu/p/2158832

## #11 — haider, 2008-12-10T18:40Z

änione else som kan svaret? specifikt detta med att kolla om inmatningen är större än 0 tecken.

Permalänk: https://www.webforum.nu/p/2159109

## #12 — spango, 2008-12-10T19:41Z

Utnyttja det faktum att Javascript är dynamiskt och hitta på ett eget fält för att se om värdet ändrats sen sist. Typ:

```
function changecolor(elmt){
    if (elmt.value != elmt.previousValue){
        elmt.style.backgroundColor="#FF8282";
        elmt.previousValue = elmt.value;
    }
}

<input ... onkeypress="changecolor(this)" />
```

Permalänk: https://www.webforum.nu/p/2159114

## #13 — haider, 2008-12-10T20:13Z

aha, detta torde vara det awesomaste sättet o lösa det på :D

Permalänk: https://www.webforum.nu/p/2159115

## #14 — haider, 2008-12-10T20:18Z

Kanoners!
For the record: Kan du ge fler exempel på var man kan använda sig av detta? Vid första anblicken trodde jag mig kunna komma på massor av användningsområden, men kom inte på fler saker än just fält som man ändrar och vill kolla strax efter.
Eller är det just då bara?

Permalänk: https://www.webforum.nu/p/2159117

## #15 — spango, 2008-12-10T20:28Z

Det är användbart varje gång man vill ge ett objekt funktionalitet som inte finns i dess ursprungliga design. Användbart för... nästan allt :) Bara fantasin sätter gränser.

Permalänk: https://www.webforum.nu/p/2159118

## #16 — haider, 2008-12-10T21:21Z

Låt oss lägga fantasin åt sidan, för då kommer jag bara avslöja mig med att inte ha så mycket javascript fantasi.

Den tycks inte känna av backspace.
Om jag shift-markerar ett stycke och trycker backspace så torde den väl ha reagerat på att innehållet inte är detsamma?

Permalänk: https://www.webforum.nu/p/2159129

## #17 — haider, 2008-12-10T21:50Z

> **haider skrev:**
>
> Låt oss lägga fantasin åt sidan, för då kommer jag bara avslöja mig med att inte ha så mycket javascript fantasi.
> 
> Den tycks inte känna av backspace.
> Om jag shift-markerar ett stycke och trycker backspace så torde den väl ha reagerat på att innehållet inte är detsamma?

provade med onkeydown och det tycks funka nu

edit: fel av mig att skriva innan jag har testat ordentligt. onkeydown tycks lyssna på alt-knappen konstigt nog. Borde kanske ta paus, har ju ont i huvudet o allt...

Permalänk: https://www.webforum.nu/p/2159132

## #18 — haider, 2008-12-10T23:02Z

Så här gjorde jag nu.
Jag utgick från Spangos script och skrev en till function:

```
function changecolor_bs(elmt){
if(window.event.keyCode == 8){
	elmt.style.backgroundColor="#FF8282";
	}
}
```

Ovanstående är endast för backspace igenkänning.
Så utöver onkeypress, kör jag även en onkeydown="changecolor_bs(this)" som alltså är kompatibel med backspaces vilket onkeypress inte var.

Är det rätt så? kan man skriva en snyggare kod?

Permalänk: https://www.webforum.nu/p/2159144

## #19 — haider, 2008-12-16T14:14Z

Kan man kombinera både changecolor och changecolor_bs så att det blir en och samma funktion och som man kör både genom onkeypress och onkeydown (för backspace igenkänning)?
Eller måste man göra som jag gjorde här, det vill säga två funktioner?

Permalänk: https://www.webforum.nu/p/2159783

## #20 — nitro2k01, 2008-12-16T19:15Z

Du kan inte (enkelt) återanvända samma funktion för båda sakerna, men ignet hinrar förstås att du flyttar själva färgbytet till en separat funktion, så du bara behöver redigera färgvärdet på ett ställe.

```
<sxcript>
function changeColor(elmt){
	elmt.style.backgroundColor = "#FF8282";
}

function keyDownHandler(elmt, args){
	var ev = window.event || args[0];

	if(window.event.keyCode == 8)
		changeColor(elmt);
}

function keyPressHandler(elmt){
    if (elmt.value != elmt.previousValue){
        changeColor(elmt);
        elmt.previousValue = elmt.value;
    }
}
</script>
```

Dock tror jag att följande är vad du egentligen vill göra:

```
<script>
function changeHandler(elmt){
	if (elmt.origValue == elmt.value)
		elmt.style.backgroundColor = "";
	else
		elmt.style.backgroundColor = "#FF8282";

}
function setOrigValue(){
	var elmt = document.getElementById("field");

	elmt.origValue = elmt.value;
}
</script>
<body onload="setOrigValue();">
<input id="field" onkeyup="changeHandler(this)" onchange="changeHandler(this)" />
```

Denna kod sparar originalvärdet och jämför redigeringar med det. Alltså, om man redigerar tillbaka fältet till originalvärdet så kommer färgen försvinna.

Permalänk: https://www.webforum.nu/p/2159827

---

Tråden på webben: https://www.webforum.nu/amne/javascript/175749-ändra-färg-på-input-ruta-har-lite-problem-med-det  
Nästa sida: https://www.webforum.nu/amne/javascript/175749-ändra-färg-på-input-ruta-har-lite-problem-med-det/page2.md