Spezifisch: Texthighlight bei Richtig/Falsch Antwort

[davelanjen]

Guten Abend,

nachdem ich nun Tagelang googel gequält und mir fast die Finger wund getippt habe, frage ich nun doch mal in einem Forum nach!

Problematik:
ich möchte ein Textfeld (optimalerweise ein Buchstabe) erstellen in welchem der Nutzer eine Eingabe machen kann. Diese Eingabe soll dann "überprüft" werden und gegebenfalls falsch - ROT oder richtig - grün dargestellt/hinterlegt werden.
Ich habe schon diverse Codeschnipsel rumliegen aber keine meiner Ansätze hat auch nur annähernd den Effekt den ich mir wünsche.

Sogesehen schaffe ich es nicht die Funktion korrekt auf den input anzuwenden! Bzw. fehlt mir noch die Idee das auf mehrere Buchstaben anzuwenden und im Umkehrschluss das Gegenteil zu erzeugen.

Hoffe auf Eure Hilfe hier!

  
<script>  
  
function highlight(text)  
{  
    inputText = document.getElementById("inputText")  
    var innerHTML = inputText.innerHTML  
    var index = innerHTML.indexOf(text);  
    if ( index >= 0 )  
    {  
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);  
        inputText.innerHTML = innerHTML  
    }  
  
}  
</script>  
  
<button onclick="highlight('H')">Pr&uuml;fen</button>  
  
<style>  
.highlight  
{  
background-color:green;  
}  
</style>  
  
<div id="inputText">  
<input type="text" name="input">  
</div>  

[M.]

Mahlzeit,

Sogesehen schaffe ich es nicht die Funktion korrekt auf den input anzuwenden! Bzw. fehlt mir noch die Idee das auf mehrere Buchstaben anzuwenden und im Umkehrschluss das Gegenteil zu erzeugen.

Du schiesst ja auch mit ner Kanone auf ne FLo und das vom Mond aus in den Marianengraben .....
Kurz, wieso so kompliziert?

Du prüfst das Input-Feld und weisst dann dem umgebenden div eine Klasse oder Hintergrundfarbe zu.

http://de.selfhtml.org/javascript/objekte/style.htm ist zwar alt aber die Grundlagen dürften rüberkommen. Zumindest bekommst du nen Anhaltspunkt um zu suchen.

Wieso du allerdings nichts dazu gefunden hast, versteh ich nicht. Hast du nach "Kassler mit Sauerkraut" gesucht?

[davelanjen]

Mahlzeit,

Sogesehen schaffe ich es nicht die Funktion korrekt auf den input anzuwenden! Bzw. fehlt mir noch die Idee das auf mehrere Buchstaben anzuwenden und im Umkehrschluss das Gegenteil zu erzeugen.

Du schiesst ja auch mit ner Kanone auf ne FLo und das vom Mond aus in den Marianengraben .....
Kurz, wieso so kompliziert?

Du prüfst das Input-Feld und weisst dann dem umgebenden div eine Klasse oder Hintergrundfarbe zu.

http://de.selfhtml.org/javascript/objekte/style.htm ist zwar alt aber die Grundlagen dürften rüberkommen. Zumindest bekommst du nen Anhaltspunkt um zu suchen.

Wieso du allerdings nichts dazu gefunden hast, versteh ich nicht. Hast du nach "Kassler mit Sauerkraut" gesucht?

Gudden,

danke Euch für die "Denkanstöße" und Tips. Ja ich geb zu .. wenn ich die Lösungen sehe habe ich die ganze Zeit wohl nach dem "falschen" gesucht. Ich werde die Nacht mal versuchen daraus was zu machen.

Ist halt nicht so leicht sich selber etwas bei zu bringen!

VIELEN HERZLICHEN DANK!

davelanjen

[Encoder]

Hast du nach "Kassler mit Sauerkraut" gesucht?

Hab mich soeben vor Lachen weggeschmissen :-)
Wer mich findet, bitte wieder zurückbringen!

Mist ich befürchte ich gehe nach diesem kulinarischen Vergleich hungrig ins Bett.

[Matthias Apsel]

Om nah hoo pez nyeetz, davelanjen!

Gunnar Bittersmann hat hier im Forum eine CSS-Lösung vorgeschlagen. Leider wurde sie noch nicht für das Wiki aufbereitet. http://wiki.selfhtml.org/wiki/Benutzer:Apsel/quiz

Matthias

[molily]

Hallo,

inputText = document.getElementById("inputText")
    var innerHTML = inputText.innerHTML

Wenn du ein Formularfeld hast, solltest du es mit der value-Eigenschaft des input-Elements auslesen. Nicht mit einer innerHTML-Eigenschaft irgendeines Elternelements. Der Wert des Formularfeldes ist nämlich kein Textknoten im DOM-Baum, also taucht er auch nicht in innerHTML auf.

Das geht so:

<input type="text" id="input">

var value = document.getElementById('input').value;

http://de.selfhtml.org/javascript/objekte/elements.htm#value

Einfacher ist eine Ersetzung mit regulären Ausdrücken.

value = value.replace(textToHighlight, "<span class='highlight'>$&</span>");

Ersetzt den textToHighlight durch sich selbst, aber eingefasst in das span-Element.

http://de.selfhtml.org/javascript/objekte/string.htm#replace
http://de.selfhtml.org/javascript/objekte/regexp.htm

Mathias

[davelanjen]

Guten Abend,

nachdem ich nun Tagelang googel gequält und mir fast die Finger wund getippt habe, frage ich nun doch mal in einem Forum nach!

Problematik:
ich möchte ein Textfeld (optimalerweise ein Buchstabe) erstellen in welchem der Nutzer eine Eingabe machen kann. Diese Eingabe soll dann "überprüft" werden und gegebenfalls falsch - ROT oder richtig - grün dargestellt/hinterlegt werden.
Ich habe schon diverse Codeschnipsel rumliegen aber keine meiner Ansätze hat auch nur annähernd den Effekt den ich mir wünsche.

Sogesehen schaffe ich es nicht die Funktion korrekt auf den input anzuwenden! Bzw. fehlt mir noch die Idee das auf mehrere Buchstaben anzuwenden und im Umkehrschluss das Gegenteil zu erzeugen.

Hoffe auf Eure Hilfe hier!

<script>

function highlight(text)
{
    inputText = document.getElementById("inputText")
    var innerHTML = inputText.innerHTML
    var index = innerHTML.indexOf(text);
    if ( index >= 0 )
    {
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML
    }

}
</script>

<button onclick="highlight('H')">Pr&uuml;fen</button>

<style>
.highlight
{
background-color:green;
}
</style>

<div id="inputText">
<input type="text" name="input">
</div>

  
Gudden,  
  
danke Euch für die "Denkanstöße" und Tips. Ja ich geb zu .. wenn ich die Lösungen sehe habe ich die ganze Zeit wohl nach dem "falschen" gesucht. Ich werde die Nacht mal versuchen daraus was zu machen.  
  
Ist halt nicht so leicht sich selber etwas bei zu bringen!  
  
VIELEN HERZLICHEN DANK!  
  
davelanjen

[Encoder]

Verpasse deinem Eingabefeld eine ID oder eine Klasse.
Dann brauchst du nur noch entweder per Javascript diese Klasse ändern ("javascript change css class" bringt da sicher Ergebnisse, ich glaube das kann man per Script tun), oder du setzt per Script direkt die Hintergrundfarbe: document.getElementById("inputText").style.background = "green";

Dann wird aus deiner riesen Funktion ein Einzeiler.