[JavaScript] Kann input nicht stylenH

[Luke]

Hi

irgendwie schaffe ich es nicht das aussehen eines inputfelders per JS zu ändern. Ich habe eine Funktion die das Inputfeld übergeben bekommt und folgendes versucht:

function check_password_length(pwd_input)
{
	if(pwd_input.value.length > 4) {

		//Das hier klappt, dh. auf pwd_input reagiert er schon mal richtig
		document.getElementById("password_length_notice").innerHTML = "";

		// Das hier klappt beides nicht
		pwd_input.style.setAttribute("border", "thin solid red", false);
		pwd_input.style.color = "#FF0000";


		// Und ein Versucht beides direkt anzusprechen auch nicht:
		document.getElementById("new_password").style.setAttribute("border", "thin solid red", false);
		document.getElementById("new_password").style.color = "#FF0000";


	}
}

Was mach ich falsch?

Danke und Grüe,
Lukas

[wahsaga]

Re: [JavaScript] Kann input nicht stylenH

Die setAttribute-Variante ist nicht zum empfehlen, das andere sollte aber klappen - ohne die Umgebung zu sehen so schlecht zu beurteilen, wo der Fehler liegt.


Generell wäre es aber cleverer, dem Inputfeld im Fehlerfalle einfach eine (ggf. zusätzliche) Klasse wie "fehler", "error", sonstwas zu verpassen - dann kann man die im allgemeinen CSS stylen, und somit die Trennung von Scriptlogik und Layout besser einhalten.

[Luke]

Re: Re: [JavaScript] Kann input nicht stylenH

Original geschrieben von wahsaga
Generell wäre es aber cleverer, dem Inputfeld im Fehlerfalle einfach eine (ggf. zusätzliche) Klasse wie "fehler", "error", sonstwas zu verpassen - dann kann man die im allgemeinen CSS stylen, und somit die Trennung von Scriptlogik und Layout besser einhalten.

Ja richtig. Aber auch das klappt nicht:

pwd_input.setAttribute("class", "input_correct");
pwd_input.className = "input_correct";
		
document.getElementById("new_password").className = "input_correct";
document.getElementById("new_password").setAttribute("class", "input_correct");

[Abraxax]

<input id="new_password" ... class="passwd" />

...

document.getElementById("new_password").className += " correct";

[Kropff]

@luke
vielleicht solltest du mal sagen, dass der ie damit nicht klarkommt. und .style.setAttribute ist eh falsch.

möglichkeit 1 über eine klassendefinition

alarm = document.createAttribute ('class');
alarm.nodeValue = 'input_false'
document.getElementById('new_password').setAttributeNode(alarm);
...
.input_false
{
  border: 'thin solid red;
  color: #f00;
} 

oder über eine style-definition

pwd_input.style.border = 'thin solid red';
pwd_input.style.color = '#FF0000'; 

und als hinweis noch das hier. ungetestet, aber das prinzip ist richtig.

peter

[Luke]

Original geschrieben von Kropff
@luke
vielleicht solltest du mal sagen, dass der ie damit nicht klarkommt. und .style.setAttribute ist eh falsch.

Das Problem trat tatsächlich im FF auf! Ich hab jetzt den Rechner neu egstartet (und sorry sorry dass ich euch dann so beansprucht habe), und jetzt klappt's auch mit dem .className =. Ich werd dann aber die lezte Version benutzen. Danke auf jeden Fall an alle.

[Luke]

Ach, PS, noch eine Frage. Ich rufe die funktion onkeydown eines inputs auf, und komplett sieht sie so aus:

function check_password_length(pwd_input)
{
	if(pwd_input.value.length < 6) {   // Oben steht 4, aber es soll 6 sein
		pwd_input.className = "";
	} else {
		pwd_input.className = "input_correct";
		
	}
}

Es war so gedacht dass wenn man erst wenn man >=6 Zeichen eingibt input_correct gesetzt wird. Es verhält sich aber so dass man 7 Zeichen eingeben muss damit das passiert, und wenn man dann wieder Zeichen entfernt wird die klasse erst bei 4 Zeichen gelöscht. Wie kann das sein?

[wahsaga]

onkeydown feuert in dem Moment, wo man die Taste runterdrückt, sozusagen runterzudrücken "anfängt" - das wirkt sich dann aber noch nicht so aus, dass die Taste wirklich ins Eingabefeld reinkommt ... besser onkeyup nehmen, das feuert erst wenn die Taste schon ins Inputfeld reingeschrieben wurde, quasi beim Finger wieder von der Taste hochnehmen ...

[Luke]

Ja k, danke. Jetzt klappts auch mit der richtigen anzalh von buchstaben