Avatar billede heyn Nybegynder
11. september 2012 - 04:32 Der 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?

MVH Christian
Avatar billede montago Praktikant
11. september 2012 - 09:16 #1
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.
Avatar billede olebole Juniormester
11. september 2012 - 11:42 #2
<ole>

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?

/mvh
</bole>
Avatar billede heyn Nybegynder
11. september 2012 - 16:19 #3
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.

P.s. Jeg har MEGET lidt erfaring med Jquery.
Avatar billede olebole Juniormester
11. september 2012 - 22:32 #4
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

Som sagt: Det kan gøres, men det er kompliceret
Avatar billede olebole Juniormester
11. september 2012 - 22:36 #5
PS: og mottoet er: If you can't fake it - you can't make it  *o)
Avatar billede heyn Nybegynder
17. april 2013 - 10:50 #6
Mange tak - jeg holder mig nok lidt tilbage.

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.

I øvrigt - Undskyld den sene tilbagemelding.

Smider i et svar
Avatar billede olebole Juniormester
17. april 2013 - 16:20 #7
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  =)
Avatar billede heyn Nybegynder
23. april 2013 - 09:05 #8
Nå - Ingen svar - Så må det desværre blive mig
Avatar billede Ny bruger Nybegynder

Din løsning...

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester