CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

ingeman Mester

07. august 2019 - 09:19 Der er 13 kommentarer

Overskriv i Textfelt i Html

<input type="text" onkeypress="myFunction()">

Jeg mangler JavaScript koden der gør følgende
Overskriver det der står i feltet med det man taster ind.
og sørger for at det man taster altid er upcase uanset capslock på tastetur.

Synes godt om

Slater Ekspert

07. august 2019 - 09:36 #1

Det første forstår jeg ikke helt. Hvad mener du med at overskrive det der står med det man taster ind?

Det andet kan f.eks. løses med:
<input type="text" onkeypress="this.value = this.value.toUpperCase()">

- Men jeg synes ikke det er en god måde. Bedre bare at sætte CSS text-transform: uppercase; på input-elementet, så det ser ud som om det er uppercase men ikke er det - og så hvis det skal bruges til noget, transformere det til uppercase der, evt. i backend, i stedet.

Synes godt om

ingeman Mester

07. august 2019 - 09:49 #2

Overskriv ?

Synes godt om

Slater Ekspert

07. august 2019 - 09:51 #3

Det forklarede ikke meget. Hvad mener du med det?

Synes godt om

ingeman Mester

07. august 2019 - 10:08 #4

Teksten i textfelt skal redigeres uden at der bruges insert

Synes godt om

Slater Ekspert

07. august 2019 - 10:10 #5

Det forklarer stadig ikke meget. Teksten i et tekstfelt kan altid redigeres uden at bruge insert.

Kan du ikke give et eksempel?

Synes godt om

ingeman Mester

07. august 2019 - 10:28 #6

Overskriv teksten i et textfelt - så længden på er den samme som før man rettede teksten

Synes godt om

Slater Ekspert

07. august 2019 - 10:32 #7

Altså, du ønsker samme effekt som hvis man brugte insert? Man sætter cursoren et sted, og når man trykker på en tast skal den erstatte bogstavet efter cursoren med det man taster?

Det er lidt mere involveret, men kan lade sig gøre. Men hvad skal der ske hvis man f.eks. trykker backspace eller delete, eller hvis man markerer tekst før man skriver? Disse vil som udgangspunkt ændre længden af teksten uanset. Er det ligegyldigt?

Synes godt om

ingeman Mester

07. august 2019 - 10:48 #8

Korrekt og ja

Synes godt om

Slater Ekspert

07. august 2019 - 10:55 #9

Her er et eksempel på hvordan det kunne gøres:
http://snip.kilolima.dk/#/avOf2Uk

Bemærk dog at du er nødt til at fortælle den hvilke tegn der skal regnes som bogstaver. Lige nu er den bare sat til [\wÆØÅæøå ], hvilket er bogstaver inkl æøå og tal og underscore. Det kan også vendes om, til at fortælle den hvilke der ikke skal regnes med, men så skal den have en liste over alle taster som ctrl, alt, insert, delete, backspace, escape, osv. Den forhindrer heller ikke teksten i at blive længere end den indtastede, hvilket hurtigt kan afhjælpes med en maxlength på feltet.

Synes godt om

ingeman Mester

07. august 2019 - 14:56 #10

Skal kunne virke på IE10 - det gør det ikke.

Synes godt om

Slater Ekspert

07. august 2019 - 15:05 #11

Koden gør, i hvert fald så vidt jeg kan teste med IE11 sat til IE10 emulator mode.

Snip gør bare ikke, så du er nødt til selv at kopiere det ind i en fil. Men hvem i alverden bruger dog IE10 i dag?

Synes godt om

ingeman Mester

07. august 2019 - 15:32 #12

IE11 var det - beklager - selv om jeg stadig er langt bagud ifh til dig.

Nedestående ser ud til at det virker efter hensigten.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>

<style type="text/css">

.text-overwrite {
text-transform: uppercase;
font-family: monospace;
padding: 5px;
}
</style>

<input type="text" class="text-overwrite"
onFocus="document.execCommand('OverWrite', false, true);"
onBlur="document.execCommand('OverWrite', false, false);" value="Eksempeltekst" >

Synes godt om

Slater Ekspert

07. august 2019 - 15:38 #13

Altså, hvis man bare tager koden fra den snip før og smider det i en html-fil, så virker det fint i IE11: https://kilolima.dk/showcase/text-overwrite.html

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS