Avatar billede steen_hansen Forsker
16. december 2005 - 20:55 Der er 34 kommentarer og
1 løsning

Hvordan erstattes disabled="disabled"?

Jeg trækker nogle tal ud i et <type="text" name="countdown" disabled="disabled"> v.hj.a. et JavaScript. Idéen er, at det antal karakterer, som brugeren indtaster, ikke må overstige XX karakterer. Scriptet sammenholder hele tiden de indtastede karakterer for maks-værdien, og trækker 1 (for hvert tastetryk) fra maks-værdien:

[ResterendeAntalKarakterer] = [MaksAntalKarakterer] - [IndtastedeKarakterer]

Scriptet viser så det resterende antal karakterer, som man har til rådighed, i det disablede textfelt, som der ikke må indtastes i. Derfor har jeg også sat tabindex på de textfelter, som der skal indtastes i, så man ved tabulatortast undgår at havne i et af de disablede textfelter.

Når man disabler et textfelt, bliver tallene dog noget "transparente" at se på, og det ligner noget, der er helt forkert på udskrifter. Mit spørgsmål er så, om man kan lave noget, der har samme funktion (nedtælling), men som ikke bliver vist i et disabled textfelt?
Avatar billede keysersoze Ekspert
16. december 2005 - 21:29 #1
jeg mener at du med readonly beholder den korrekte farve - endelig kan du lav en div/span og ændre indholdet deri med innerHTML
Avatar billede steen_hansen Forsker
16. december 2005 - 21:35 #2
Hvis man kun benytter readonly, bliver textfeltet valgt, når man tabulerer gennem formularen. Så den virker desværre ikke :o/

Kan du lave noget brugbart med div/span? Jeg har selv prøvet, men jeg kan slet ikke greje hvordan det kan/skal laves.
Avatar billede steen_hansen Forsker
16. december 2005 - 21:44 #3
Scriptet som sådan virker ellers sk...godt, der tælles ned fra 16 (i nedenstående eksempel). Den eneste hage ved det, er den meget utydelige tekst i det disablede tekstfelt. Man må kunne benytte <span ......></span> i stedet?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%

    Const MaxLengthUser = 16

%>

<html>

<head>
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript">
function showLenUser()
    { frmCreateUser.countdownuser.value = <%=MaxLengthUser%> - frmCreateUser.username.value.length }
</script>
<title>Opret bruger</title>
</head>

<body onload="showLenUser()">

<table>
    <tr>
        <td>Brugernavn:</td>
        <td><input type="text" name="username" tabindex="1" onkeydown="showLenUser()" onkeyup="showLenUser()" onchange="showLenUser()" onfocus="showLenUser()" onblur="showLenUser()"></td>
        <td><input type="text" name="countdownuser" style="text-align: center" readonly value="" disabled="disabled"></td>
    </tr>
</table>

</body>

</html>
Avatar billede keysersoze Ekspert
16. december 2005 - 21:50 #4
<span id="bla">16</span>

document.getElementById("bla").innerHTML = '15';
Avatar billede steen_hansen Forsker
16. december 2005 - 21:52 #5
Hm? Hvor får jeg "bla" fra?
Avatar billede keysersoze Ekspert
16. december 2005 - 22:00 #6
det er navnet (id'et) på min span
Avatar billede steen_hansen Forsker
16. december 2005 - 22:04 #7
Ok. Jeg kan bare ikke se hvordan det skal skrues sammen. Noget i stil med dette, eller er det helt hen i skoven?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%

    Const MaxLengthUser = 16

%>

<html>

<head>
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript">
document.getElementById("bla").innerHTML = '15';
</script>
<title>Opret bruger</title>
</head>

<body>

<span id="bla">16</span>

</body>

</html>
Avatar billede steen_hansen Forsker
16. december 2005 - 22:05 #8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript">
document.getElementById("bla").innerHTML = '15';
</script>
<title>Opret bruger</title>
</head>

<body>

<span id="bla">16</span>

</body>

</html>
Avatar billede steen_hansen Forsker
16. december 2005 - 22:07 #9
Eller sådan?

<td><type="text" javascript="document.getElementById("bla").innerHTML = '15';"></td>
<td><span id="bla">16</span></td>
Avatar billede keysersoze Ekspert
16. december 2005 - 22:08 #10
nok nærmere sådan;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript">
function atest() {
    document.getElementById("bla").innerHTML = '15';
}
</script>
<title>Opret bruger</title>
</head>

<body onload="atest();">

<span id="bla">16</span>

</body>

</html>
Avatar billede steen_hansen Forsker
16. december 2005 - 22:11 #11
Ok, men hvordan får jeg forbundet det med mit type="text"?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript">
function atest() {
    document.getElementById("bla").innerHTML = '15';
}
</script>
<title>Opret bruger</title>
</head>

<body onload="atest();">

<table>
    <tr>
        <td><input type="text"></td>
        <td><span id="bla">16</span></td>
    </tr>
</table>

</body>

</html>
Avatar billede keysersoze Ekspert
16. december 2005 - 22:45 #12
på samme måde - bare giv dit input et id der svarer til det du skriver i din funktion... men hvorfor vil du nu pludselig igen have et inputfelt?
Avatar billede steen_hansen Forsker
16. december 2005 - 22:52 #13
Fordi der skal indtastes et brugernavn, og det må højst fylde 16 karakterer. Det er andre, der skal administrere oprettelsen af brugere, og der skal ligge den lille sikkerhed i, at de overholder kriterierne. Det var formålet med spørgsmålet :o)

Jeg er ikke med på hvad du mener. Det her virker ikke:

<input type="text" id="bla">
Avatar billede keysersoze Ekspert
16. december 2005 - 23:29 #14
hvis du vil ændre indholdet i et inputfelt skal du bruge value ligesom i den første kode du postede;

document.getElementById("bla").value = '15';

Og så skal du selvfølgelig sørge for at der ikke er flere felter med samme id.
Avatar billede steen_hansen Forsker
16. december 2005 - 23:37 #15
Jeg kan slet ikke se hvordan det skal laves. Jeg prøver mig lidt frem efter dine anvisninger, men ved ikke hvordan det skal laves :o)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript">
function atest() {
    document.getElementById("bla").value = '15';
}
</script>
<title>Opret bruger</title>
</head>

<body onload="atest();">

<table>
    <tr>
        <td><input type="text"<%' Hvad skal der ind her?%>></td>
        <td><span id="bla">16</span></td>
    </tr>
</table>

</body>

</html>

Scriptet skal på en eller anden måde tælle ned fra 16 til 0. At jeg har <span id="bla">16</span> uden noget tjek på textfeltet, kan jeg ikke se skulle kunne udrette noget. Hvordan tjekkes der hvad der bliver indtastet i textfeltet?
Avatar billede steen_hansen Forsker
16. december 2005 - 23:40 #16
Og skal der virkelig stå 16 mellem <span> og </span>? Der vil jo komme til at stå 16 uanset hvad der ellers scriptes.
Avatar billede keysersoze Ekspert
16. december 2005 - 23:49 #17
jamen - jeg forstår ikke helt hvad du vil så :( prøv at se dette eksempel så sådan set bare er en udviddelse af dit oprindeligt;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%

    Const MaxLengthUser = 16

%>

<html>

<head>
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<script language="javascript">
function showLenUser(){
    document.getElementById('countdownuser').value = <%=MaxLengthUser%> - document.getElementById('username').value.length
    document.getElementById('countdownuserspan').innerHTML = <%=MaxLengthUser%> - document.getElementById('username').value.length
}
</script>
<title>Opret bruger</title>
</head>

<body onload="showLenUser()">

<table>
    <tr>
        <td>Brugernavn:</td>
        <td><input type="text" name="username" tabindex="1" onkeydown="showLenUser()" onkeyup="showLenUser()" onchange="showLenUser()" onfocus="showLenUser()" onblur="showLenUser()"></td>
        <td><input type="text" name="countdownuser" style="text-align: center" readonly value="" disabled="disabled"></td>
        <td><span id="countdownuserspan"></span></td>
    </tr>
</table>

</body>

</html>
Avatar billede steen_hansen Forsker
17. december 2005 - 00:09 #18
<td>Brugernavn:</td>
<td><type="text" name="username"></td>
<td><span id="bla"></span></td>

i stedet for

<td>Brugernavn:</td>
<td><type="text" name="username"></td>
<td><input type="text" disabled="disabled" readonly></td>

så der kan skrives et reelt tal ud, uden at det står i et textfelt, der er disablet. Når textfeltet er disablet, bliver tallene meget slørede. Specielt på udskrifter. Prøv mit eksempel fra 16/12-2005 21:44:53
Avatar billede steen_hansen Forsker
17. december 2005 - 00:13 #19
Jamen, den er der da :o)

Kan denne ikke pilles ud? Den er unødvendig ... er den ikke? :o)

<td><input type="text" name="countdownuser" style="text-align: center" readonly value="" disabled="disabled"></td>
Avatar billede keysersoze Ekspert
17. december 2005 - 00:33 #20
jo - den kan du sagtens tage ud. Så skal du bare tage den tilsvarende js-del ud, altså "document.getElementById('countdownuser').value = <%=MaxLengthUser%> - document.getElementById('username').value.length"
Avatar billede steen_hansen Forsker
17. december 2005 - 00:44 #21
keyser, du er et geni :o)

Kan man lægge et stop ind, f.eks. en msgbox, hvis værdien bliver mindre end 0?

Læg et svar. Hvis du kan hjælpe med stoppet også, sætter jeg point op :o)
Avatar billede steen_hansen Forsker
17. december 2005 - 01:01 #22
Jeg fik lige en fejl ved oprettelse af nr. 2:

<script language="javascript">
function showLenUser(){
document.getElementById('countdownuserspan').innerHTML = <%=MaxLengthUser%> - document.getElementById('username').value.length
}
</script>
<script language="javascript">
function showLenFirstname()
document.getElementById('countdownfirstnamespan').innerHTML = <%=MaxLengthFirstname%> - document.getElementById('firstname').value.length
}
</script>

<body onload="showLenUser(); showLenFirstname()">

<span id="countdownuserspan"></span>
<span id="countdownfirstnamespan"></span>


Fejl:
Linie: 56
Tegn: 16
Fejl: Et objekt var ventet
Kode: 0

Min linie 56 er <body onload="showLenUser(); showLenFirstname()">

Hvad går der galt?
Avatar billede steen_hansen Forsker
17. december 2005 - 01:06 #23
Jeg fandt den, sorry :o)

function showLenFirstname()

manglede en {

function showLenFirstname() {
Avatar billede steen_hansen Forsker
18. december 2005 - 15:10 #24
keysersoze, det virker ikke i Mozilla og FireFox :o(
Avatar billede steen_hansen Forsker
21. december 2005 - 21:55 #25
Husk lige at smide et svar. Og tak for hjælpen :o)
Avatar billede thesurfer Nybegynder
21. december 2005 - 21:59 #26
Den behøver jo ikke at være "disabled", for at man ikke kan redigere i feltet..
Der er jo noget der hedder "readonly".. :-)

/theSurfer
Avatar billede steen_hansen Forsker
21. december 2005 - 22:10 #27
Det er jeg klar over, men det var lige så meget for at kunne styre tabindex bedre :o)
Avatar billede thesurfer Nybegynder
21. december 2005 - 22:11 #28
ahh.. vidste jeg da godt ;-)

/theSurfer
Avatar billede steen_hansen Forsker
21. december 2005 - 22:18 #29
Jeg havde skam forsøgt mig med readonly: 16/12-2005 21:44:53

<input type="text" name="countdownuser" style="text-align: center" readonly value="" disabled="disabled">

Men ren tekst er at foretrække, det ser ikke synderligt godt ud i et disablet textfelt :o)

Så mangler jeg lige et svar fra keysersoze.
Avatar billede thesurfer Nybegynder
21. december 2005 - 22:20 #30
Jeg mente readonly, uden disabled..
Man kan stadig tab'e ned til feltet, men man kan ikke redigere i det..

Du kunne muligvis bruge følgende (sammen med readonly, uden disabled): onfocus="this.blur()"

/theSurfer
Avatar billede steen_hansen Forsker
21. december 2005 - 22:43 #31
Ok, det var måske en mulighed. Men det jeg er ved at lave, er til absolute nybegyndere(!), hvis største udfordring mht. Windows og en PC generelt, er at få 7-kabalen til at gå op. Det er de til gengæld også skrappe til :oD

Det er udelukkende af hensyn til brugervenligheden, for at de ikke skal miste orienteringen, når der tabuleres ned igennem en formular. Vi skal jo prøve at undgå musen mest muligt, og så er det jo også hurtigere, hvis man kan klare sig med tastaturet.

Første gang de skal prøve at tabulere, tør jeg vædde hvad det skal være på, at TAB bliver holdt nede, til de har været igennem alle felterne 324654 gange. Og så er det, at det bliver forvirrende, når man ikke kan få øje på den blinkende cursor :oD

Det er jo så simpelt, så simpelt. Havde det været noget, der skulle bruges af brugere med bare en smule mere erfaring, så var jeg måske ikke begyndt at tænke på det overhovedet. Men de skal holdes i hånden det første stykke tid, og så vil jeg bare prøve at lave det SIMPELT. De har mange erfaringer til gode endnu :o)

Nu får jeg teksten alene, og så er der ikke så meget at gå fejl af. Det værste, der kan ske er, at cursoren kan havne i adresselinien, og at URL'en bliver highlightet :o)

Men jeg vil prøve dit eksempel andetsteds, det er jo fedt at lære :o)
Avatar billede thesurfer Nybegynder
21. december 2005 - 22:48 #32
Hehe.. det er sjældent at jeg får 7-Kabale til at gå op.. skidtet virker ikke ordentligt.. må være en bug.. :-)

/theSurfer
Avatar billede steen_hansen Forsker
21. december 2005 - 23:00 #33
Typisk MS at lave noget, der ikke er debugget - tsk tsk! Jeg har også forventninger, når jeg køber en lottokupon med joker og 7 rigtige :oD
Avatar billede keysersoze Ekspert
22. december 2005 - 09:15 #34
svar
Avatar billede steen_hansen Forsker
23. december 2005 - 00:20 #35
Takker. Og glædelig Jul :o)
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