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

onfocus?

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

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?

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?

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....

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

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

Nej, bara när rutan tappar fokus

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

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 :)

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

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)" />

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

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?

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.

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?

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...

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?

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?

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.