11. september 2012 - 04:32Der er
7 kommentarer og 1 løsning
At ændre baggrundsfarve på hver enkelt bogstav i en tekst
Hej Eksperter
Jeg er ved at lave en side til træning i maskinskrivning.
Det skal foregå på den vis at eleven prøver at kopiere en tekstlinie.
Efterhånden som eleven taster ind skal baggrundsfarven på de tegn man har kopieret ændres til at være grå. Hvis man laver fejl skal baggrundsfarven ændres til rød. Desuden skal man ikke kunne slette bogstaver i textareafeltet når de først er indlæst. Man skal heller ikke kunne trykke return. Endelig skal siden automatisk udføre enter når det sidste bogstav (el. fejl :) ) er indtastet.
Har nogen et godt forslag til hvordan sådan 4 funktioner skal se ud?
Med kunstig intelligens skaber HP’s nye OmniBook X 14 en unik og skræddersyet brugeroplevelse målrettet dem, der ønsker høj ydeevne og intelligente funktioner
Du kan bruge eventet OnKeyUp til at udfører en tjek-funktion som tjekker inputtet
du kan i samme funktion også stoppe et RETURN tegn med e.preventDefault og lign.
Det vil være en god ide at bruge jQuery til at lave din eventhandler så du ikke selv skal kæmpe med alle undtagelserne, idet det meget hurtigt bliver et helvede.
jQuery kan også bruges til at disable din textbox (så den bliver grå) og sætte baggrundsfarven.
Som jeg læser spørgsmålet, kan det ikke umiddelbart gøres. Du kan ikke give et enkelt tegn en baggrundsfarve - med mindre dette tegn ligger i et element for sig selv.
I hvilken tekst skal tegnene farves? Den originale eller den kopierede?
Ole: I tekstfeltet skal der anvendes grå og rød. I textarea inputet skal fejl angives med rødt.
Montago: Disable? Vil det ikke forhindre input.
Jeg kan godt lave det i C++ men det skal jo være som en webside så man undgår installation og nemt kan styrre flere brugere.
Ole: Kan man gøre de enkelte tegn i en tekst usynlige og ændre farven på bogstavet (altså ikke baggrundsfarve). Så kunne jeg undgå inputfeltet og bare registrere resultatet i et array i javascript som læser input fra keys.
Kan man lave en lang række af inputfelter i en række således at man ikke kan se at de er adskilt, og de så ligner en tekststreng.
Med en del kreativitet kan man godt lave noget, der kan komme til at virke, og det kan gøres på flere måder. Det kræver dog rigtig god indsigt i JavaScript, DOM, CSS, Event- og Selection-modeller - og ikke mindst browsernes forskelligheder på disse områder.
Både montago og jeg har arbejdet en del med browserbaserede editeringsinterfaces og har i flere tråde diskuteret forskellige hacks og tweaks. Tro mig, det er kompliceret =)
Hverken i et INPUT eller TEXTAREA kan du farve et enkelt bogstav anderledes end de andre - det gælder også baggrundsfarve.
I andre elementer (f.eks. DIV) kan du kun ændre på et tagns farve eller baggrundsfarve ved at lægge det i et element for sig selv - typisk et SPAN.
Ved INPUT eller TEXTAREA kan man bruge en monospaced skrift. Så kan man lægge et andet element bag ved og placere et eller flere farvede elementer med specifikke størrelser og placering - som kan udregnes, da alle tegn har samme dimensioner i et monospaced skriftsnit. Derved kan man highlighte tekst med 'baggrundsfarve'.
Derudover kan man lave et gemt TEXTAREA, som man hele tiden flytter fokus ned i, når der tastes i dokumentet. Så kan man på forskellige måder flytte teksten op i et DIV og formatere den med stylede SPAN.
Når montago omtaler det store, grumme event-handler-helvede, så ved jeg, han kun omtaler et enkelt af de utallige helveder, han har befundet sig i, mens han trådte vande i editorsumpens hængedyn. Det var dengang, vi gik til synkronsvømning :D
Men editoren hos one.com giver mulighed for det. Det fungerer dog ikke perfekt da alle farvevalg fører til samme farve :) Det kunne være man skulle "låne" den.
Sådan som jeg læser dit spørgsmål, er det mange forskellige ting, du ønsker. Som jeg kender editoren hos one.com, opfylder den ingen af de krav, så du må nok forklare lidt nærmere =)
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.