Notifikationer

Markér alle som læst Log ud

svjensen Nybegynder

29. maj 2003 - 09:16 Der er 22 kommentarer og
1 løsning

Automatisk inputmaske

Hvordan kan jeg lave en inputmaske i et tekstfelt?

I det konkrete eksempel skal brugeren indtaste en dato i et tekstfelt efter syntaksen: DD-MM-YYYY

Jeg ønsker, at '-' indsættes automatisk efterhånden som brugeren taster datoen. Desuden bør scriptet ignorere en bindestreg fra brugeren, da det jo indsættes automatisk.

Synes godt om

roenving Novice

29. maj 2003 - 14:33 #1

Den var lidt besværlig at greje, for eventen skygger processen, men med et skjult felt til at holde værdien, fik jeg den ihvertfald til at virke i min IE6, men den ville ikke virke i Stone's interne browser, men her er den:

<html><head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script>
function inputDate(e,fld){
charCode = (e.which)?e.which:e.keyCode;
if (charCode>57 || charCode<48){
return false;
}

if (fld.value.length==1 || fld.value.length==4){
fld.form.date2.value=fld.value+String.fromCharCode(charCode)+"-";
}else{
fld.form.date2.value=fld.value+String.fromCharCode(charCode)
}
return true;

}
</SCRIPT>
</HEAD>
<BODY>
<form>
<INPUT type="text" name="date" onkeydown="this.form.date2.value=this.value" onkeypress="return inputDate(event,this);" onkeyup="this.value=this.form.date2.value;this.focus()">
<INPUT type="hidden" name="date2" value="">
</FORM>
</body>
</HTML>

Synes godt om

roenving Novice

29. maj 2003 - 14:34 #2

Prøver at se om jeg kan få den igang med en global variabel istedet ...

Synes godt om

roenving Novice

29. maj 2003 - 14:39 #3

Stadig sådan at IE æder den men ikke Stone's:

<html><head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script LANGUAGE="javascript" TYPE="text/javascript">
var newVal="";
function inputDate(e,fld){
newVal=fld.value;
charCode = (e.which)?e.which:e.keyCode;
if (charCode>57 || charCode<48){
return false;
}

if (fld.value.length==1 || fld.value.length==4){
newVal=fld.value+String.fromCharCode(charCode)+"-";
}else{
newVal=fld.value+String.fromCharCode(charCode)
}
return true;

}
</SCRIPT>
</HEAD>
<BODY>
<form>
<INPUT type="text" name="date" onkeypress="return inputDate(event,this);" onkeyup="this.value=newVal;this.focus()">
</FORM>
</body>
</HTML>

Synes godt om

svjensen Nybegynder

29. maj 2003 - 14:48 #4

Jeg prøver det lige af.

Hvor egnet syntes du Stone's Webwriter er til asp programmering?

Synes godt om

svjensen Nybegynder

29. maj 2003 - 14:49 #5

Jeg mente Javascript, men vil gerne høre din mening om begge dele

Synes godt om

svjensen Nybegynder

29. maj 2003 - 14:59 #6

Scriptet virker i min IE 5.5, men med et par enkelte problemer:

- Det er muligt at tilføje flere karakterer end de tilladte (dd-mm-yyyy)
- Det er ikke muligt at slette i det der allerede er skrevet. Jeg gætter på, at det er fordi scriptet kun tillader tal (charCode 48 til 57)?!

Er du i øvrigt leveringsdytig i en charcode oversigt? eller kan du henvise til en?

Synes godt om

roenving Novice

29. maj 2003 - 15:10 #7

Stone's er bestemt ikke egnet til javascript-programmering men bekvemt, når man samtidig har lidt html, det skal virke sammen med ;-)

-- mht. asp bliver jeg dig svar skyldig, men der må være nogle værktøjer ...

- length kan vi tilføje med en enkelt linje lige efter charCode-checket:

if (fld.value.length==10)return false;

- den anden må jeg lige kigge på, fordi der som standard kun returneres ascii-koder (se f.eks. http://www.kandu.dk/dk/kurser/HTML/ascii.asp ;O)

Synes godt om

roenving Novice

29. maj 2003 - 15:19 #8

erstat checklinjen med:

if (fld.value.length==10 || charCode>57 || charCode<48){
return false;
}

så er længde-checket med -- jeg vil godt lige finde ud af den med slet-knappen -- der er hul, så det er bare lige et spm om at få det på plads ...

Synes godt om

roenving Novice

29. maj 2003 - 15:40 #9

-- jamen så dur den i IE:

<html><head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">

<script LANGUAGE="javascript" TYPE="text/javascript">
var newVal="";

function inputDate(e,fld){
charCode = (e.which)?e.which:e.keyCode;

newVal=fld.value;
if (fld.value.length==10 || charCode>57 || charCode<48){
return false;
}

newVal=fld.value+String.fromCharCode(charCode)
if (fld.value.length==1 || fld.value.length==4){
newVal=newVal+"-";
}

return true;

}
</SCRIPT>
</HEAD>
<BODY>
<form>
<INPUT type="text" name="date" value="" onkeypress="return inputDate(event,this);" onkeyup="if(event.keyCode==8){newVal=newVal.substring(0,newVal.length-1)}this.value=newVal;this.focus();">
</FORM>
</body>
</HTML>

-- mit problem var, at onkeydown og -up leverer en henvisning til tasten, mens onkeypress kun leverer (og eksekveres !-), hvis tegnet kan skrives ...

Synes godt om

svjensen Nybegynder

29. maj 2003 - 15:56 #10

Fedt, det virker.

Jeg takker ærbødigst ;-)

BTW Jeg bruger selv Visual Interdev, men jeg er forholdsvis grøn, så jeg famler lidt omkring for at finde mig til rette.

Synes godt om

svjensen Nybegynder

29. maj 2003 - 15:57 #11

Husk lige et svar.

Synes godt om

roenving Novice

29. maj 2003 - 16:09 #12

Muy bueno '-)

-- jeg synes da lige jeg selv skal have en, som også laver noget grundlæggende validering, så det er jeg igang med ;O)

Synes godt om

roenving Novice

29. maj 2003 - 16:17 #13

Fandt lige en mærkværdighed -- og jeg kender også årsagen, så den retter jeg også i en ny udgave ,-)

Hvis du sletter mange tegn, smider den det hele minus første slettede tegn i hovedet på dig igen

-- ellers har jeg den med ignorering af datoer over 31, februar over 29 dg. m.v.

Synes godt om

roenving Novice

29. maj 2003 - 16:47 #14

Og så den endelige udgave -- eneste ting, som vil/kan volde problemer, er, at man ikke kan slette bindestregerne med eet tasttryk (ellers ville de ikke være automatiske) -- den variant skal såmænd nok komme lidt senere:

<html><head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">

<script LANGUAGE="javascript" TYPE="text/javascript">
var newVal="";
var dd=0;
var mm=0;
var repeatRemove=0;

function restoreVal(eC,fld){
if (eC==8||repeatRemove>0){
if (newVal.length>repeatRemove){
newVal=newVal.substring(0,newVal.length-repeatRemove)
}else{
newVal="";
}
}
if(newVal.length==2||newVal.length==5)newVal+="-";
repeatRemove=0;
fld.value=newVal;
}

function inputDate(e,fld){
removeChar=false;
newVal=fld.value;
charCode = (e.which)?e.which:e.keyCode;
if (fld.value.length==10 || charCode>57 || charCode<48){
return false;
}

newVal=fld.value+String.fromCharCode(charCode)
//if (fld.value.length==1 || fld.value.length==4){
//newVal=newVal+"-";
//}

switch (fld.value.length){
case 0:
//alert(newVal);
if (+newVal>3){repeatRemove++;return false;}
break;
case 1:
//alert(newVal);
if (+newVal>31){repeatRemove++;return false;}
dd = +newVal;
newVal=newVal+"-";
break;
case 2:
break;
case 3:
if (charCode>49){repeatRemove++;return false;}
break;
case 4:
var mm = parseInt(newVal.substring(3),10);
if (mm==2 && dd>29 || mm>12){repeatRemove++;return false;}
//alert(mm);
if (dd==31 && (mm==4 || mm==6 || mm==9 || mm==11)){repeatRemove++;return false;}
newVal=newVal+"-";
break;
case 9:

default:
}

return true;

}
</SCRIPT>
</HEAD>
<BODY>
<form>
<INPUT type="text" name="date" value="" onkeydown="if(event.keyCode==8)repeatRemove++;" onkeypress="return inputDate(event,this);" onkeyup="restoreVal(event.keyCode,this);this.focus();">
</FORM>
</body>
</HTML>

-- og takker for points ;~}

Synes godt om

roenving Novice

29. maj 2003 - 17:35 #15

-- og så virker den:

- godtager kun relevante tal på dag- og månedspladserne
- sætter selv bindestreger ind efter dage og måneder
- hvis man sletter en bindestreg sætter den bindestregen ind igen, hvis man ikke selv gør det
- tester IKKE for skudår

- skulle virke NN4+ og IE4+, men IKKE Stone's
-- har ikke testet andet end IE6, men har omhyggeligt brugt nødvendige cross-browser-metoder, hvis du kan teste på de ældre og andre vil jeg gerne vide det ...

mvh
jes

<html><head>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">

<script LANGUAGE="javascript" TYPE="text/javascript">
var newVal="";
var dd=0;
var mm=0;
var repeatRemove=0;

function getCharCode(e){
return (e.which)?e.which:e.keyCode;
}

function restoreVal(eC,fld){
if (eC==8||repeatRemove>0){
if (newVal.length>repeatRemove){
newVal=newVal.substring(0,newVal.length-repeatRemove)
}else{
newVal="";
}
}
repeatRemove=0;
fld.value=newVal;
}

function inputDate(e,fld){
removeChar=false;
newVal=fld.value;
charCode = getCharCode(e);
if ((fld.value.length==2 || fld.value.length==5) && charCode==45){newVal+="-";return true;}
if (fld.value.length==10 || charCode>57 || charCode<48){
return false;
}

newVal=fld.value+String.fromCharCode(charCode)

switch (fld.value.length){
case 0:
if (+newVal>3){repeatRemove++;return false;}
break;
case 1:
if (+newVal>31){repeatRemove++;return false;}
dd = +newVal;
newVal+="-";
break;
case 2:
newVal=fld.value+"-"+String.fromCharCode(charCode)
if (charCode>49){repeatRemove++;return false;}
break;
case 3:
if (charCode>49){repeatRemove++;return false;}
break;
case 4:
var mm = parseInt(newVal.substring(3),10);
if (mm==2 && dd>29 || mm>12){repeatRemove++;return false;}
if (dd==31 && (mm==4 || mm==6 || mm==9 || mm==11)){repeatRemove++;return false;}
newVal+="-";
break;
case 5:
newVal=fld.value+"-"+String.fromCharCode(charCode)
break;
}
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<INPUT type="text" name="date" value="" onkeydown="if(getCharCode(event)==8)repeatRemove++;" onkeypress="return inputDate(event,this);" onkeyup="restoreVal(getCharCode(event),this);this.focus();">
</FORM>
</body>
</HTML>

Synes godt om

svjensen Nybegynder

29. maj 2003 - 22:21 #16

Testet og fundet i orden i IE 5.5.
Jeg er imponeret over, at du gad køre den helt derud.
But then again, det kunne jeg nok også selv have fundet på, når først jeg blev grebet af det.

For lige at være sikker på, at jeg har forstået flowet i scriptet; Har jeg ret i, at jeg ved at tilføje yderligere cases vil kunne mindske de tilladte årstal? Fx hvis jeg ikke ønsker datoer længere tilbage end 1900 eller senere end i år (fødselsdatoer)?

Pointene er absolut velfortjent, og måske nok en kende i underkanten.

Søren

Synes godt om

svjensen Nybegynder

29. maj 2003 - 23:05 #17

Jeg har arbejdet lidt videre med din løsning og har lavet følgende justeringer:
- Jeg har lukket for muligheden for at taste 00 som dato eller måned.
- Jeg har kun tilladt årstal mellem 1900 og 2003, da det er det jeg skal bruge.

Jeg kunne dog godt tænke mig at slutårstallet (2003) tager udgangspunkt i det aktuelle årstal, så det bliver tilladt at taste 2004 den 1. januar 2004.

Mit tilpassede script er nedenfor.

<script LANGUAGE="javascript" TYPE="text/javascript">
//Script til inputmaske for datofeltet. START
var newVal="";
var dd=0;
var mm=0;
var repeatRemove=0;

function getCharCode(e){
return (e.which)?e.which:e.keyCode;
}

function restoreVal(eC,fld){
if (eC==8||repeatRemove>0){
if (newVal.length>repeatRemove){
newVal=newVal.substring(0,newVal.length-repeatRemove)
}else{
newVal="";
}
}
repeatRemove=0;
fld.value=newVal;
}

function inputDate(e,fld){
removeChar=false;
newVal=fld.value;
charCode = getCharCode(e);
if ((fld.value.length==2 || fld.value.length==5) && charCode==45){newVal+="-";return true;}
if (fld.value.length==10 || charCode>57 || charCode<48){
return false;
}

newVal=fld.value+String.fromCharCode(charCode)

switch (fld.value.length){
case 0:
if (+newVal>3){repeatRemove++;return false;}
break;
case 1:
if (+newVal>31){repeatRemove++;return false;}
if (+newVal==00){repeatRemove++;return false;}
dd = +newVal;
newVal+="-";
break;
case 2:
newVal=fld.value+"-"+String.fromCharCode(charCode)
if (charCode>49){repeatRemove++;return false;}
break;
case 3:
if (charCode>49){repeatRemove++;return false;}
break;
case 4:
var mm = parseInt(newVal.substring(3),10);
if (mm==2 && dd>29 || mm>12 || mm==00){repeatRemove++;return false;}
if (dd==31 && (mm==4 || mm==6 || mm==9 || mm==11)){repeatRemove++;return false;}
newVal+="-";
break;
case 5:
newVal=fld.value+"-"+String.fromCharCode(charCode)
break;
case 6:
if (charCode<49 || charCode>50){repeatRemove++;return false;} //Tillader 1 og 2 som første tal i årstal
break;
case 7:
var yy = parseInt(newVal.substring(6));
if (yy<19 || yy>20){repeatRemove++;return false;} //Tillader 19 og 20 som første to tal i årstal
break;
case 8:
var yyy = parseInt(newVal.substring(6));
if (yyy>200){repeatRemove++;return false;} //Tillader kun 0 som trejde tal, hvis første to er 2 og 0.
break;
case 9:
var yyyy = parseInt(newVal.substring(6));
if (yyyy>2003){repeatRemove++;return false;} //Tillader højst 2003 som årstal.
break;
}
return true;
}
//Script til inputmaske for datofelt. SLUT
</SCRIPT>

Synes godt om

svjensen Nybegynder

29. maj 2003 - 23:33 #18

Så lykkedes det mig at få scriptet til at tage udgangspunkt i det aktuelle årstal. Jeg tror ikke at jeg kan komme på flere gode ideer mht. dette spørgsmål, så tak for hjælpen.

Scriptdelen af løsningen (input feltet som tidligere angivet af 'roenving'):
-------------------------------------

<script LANGUAGE="javascript" TYPE="text/javascript">
//Script til inputmaske for datofeltet. START
var newVal="";
var dd=0;
var mm=0;
var repeatRemove=0;

function getCharCode(e){
return (e.which)?e.which:e.keyCode;
}

function restoreVal(eC,fld){
if (eC==8||repeatRemove>0){
if (newVal.length>repeatRemove){
newVal=newVal.substring(0,newVal.length-repeatRemove)
}else{
newVal="";
}
}
repeatRemove=0;
fld.value=newVal;
}

function inputDate(e,fld){
removeChar=false;
newVal=fld.value;
charCode = getCharCode(e);
if ((fld.value.length==2 || fld.value.length==5) && charCode==45){newVal+="-";return true;}
if (fld.value.length==10 || charCode>57 || charCode<48){
return false;
}

newVal=fld.value+String.fromCharCode(charCode)
var curDate = new Date();

switch (fld.value.length){
case 0:
if (+newVal>3){repeatRemove++;return false;}
break;
case 1:
if (+newVal>31){repeatRemove++;return false;}
if (+newVal==00){repeatRemove++;return false;}
dd = +newVal;
newVal+="-";
break;
case 2:
newVal=fld.value+"-"+String.fromCharCode(charCode)
if (charCode>49){repeatRemove++;return false;}
break;
case 3:
if (charCode>49){repeatRemove++;return false;}
break;
case 4:
var mm = parseInt(newVal.substring(3),10);
if (mm==2 && dd>29 || mm>12 || mm==00){repeatRemove++;return false;}
if (dd==31 && (mm==4 || mm==6 || mm==9 || mm==11)){repeatRemove++;return false;}
newVal+="-";
break;
case 5:
newVal=fld.value+"-"+String.fromCharCode(charCode)
break;
case 6:
var y = parseInt(newVal.substring(6));
var cy = curDate.getFullYear().toString().substr(0,1);
if (charCode<49 || y>cy){repeatRemove++;return false;} //Tillader 1 og 2 som første tal i årstal
break;
case 7:
var yy = parseInt(newVal.substring(6));
var cyy = curDate.getFullYear().toString().substr(0,2);
if (yy<19 || yy>cyy){repeatRemove++;return false;} //Sammenligner to først tal
break;
case 8:
var yyy = parseInt(newVal.substring(6));
var cyyy = curDate.getFullYear().toString().substr(0,3);
if (yyy>cyyy){repeatRemove++;return false;} //Sammenligner tre første tal
break;
case 9:
var yyyy = parseInt(newVal.substring(6));
if (yyyy>curDate.getFullYear()){repeatRemove++;return false;} //Tillader højst 2003 som årstal.
break;
}
return true;
}
//Script til inputmaske for datofelt. SLUT
</SCRIPT>

Synes godt om

roenving Novice

29. maj 2003 - 23:34 #19

For at klare den med højest til i år kan du bare:

case 9:
var yyyy = parseInt(newVal.substring(6));
var thisYear = new Date().getFullYear();
if (yyyy>thisYear){repeatRemove++;return false;} //Tillader højst i år som årstal.
}

du kunne jo også indføje en egentlig validering :-)

case 9:
var yyyy = parseInt(newVal.substring(6));
var thisYear = new Date().getFullYear();
if (yyyy>thisYear){repeatRemove++;return false;} //Tillader højst 2003 som årstal.
suppliedDate = new Date(yyyy,mm,dd);
if (suppliedDate.getFullYear()!=yyyy||suppliedDate.getMonth()!=mm||suppliedDate.getDate()!=dd){repeatRemove++;return false;}//Egentlig dato-validering
}

Det er så nemt med Date-objektet ...

Synes godt om

roenving Novice

29. maj 2003 - 23:37 #20

*gg* Der var du 18 sek. hurtigere -- men jeg skulle jo også have valideringen med ;-)

Synes godt om

svjensen Nybegynder

29. maj 2003 - 23:37 #21

Jeg har justeret lidt i det tidligste tilladte årstal.
Jeg indtaster årstallet, og klipper det op på samme måde som for det aktuelle årstal. Eneste forskel er at der skal sammenlignes den anden vej (ikke mindre end)

Synes godt om

roenving Novice

29. maj 2003 - 23:38 #22

Hov fejl i:

case 4:
mm = parseInt(newVal.substring(3),10);//ikke noget var der, mm er en global variabel !-)

Synes godt om

roenving Novice

29. maj 2003 - 23:45 #23

Denne her kan optimeres:

var y = parseInt(newVal.substring(6));
var cy = curDate.getFullYear().toString().substr(0,1);
if (charCode<49 || y>cy){repeatRemove++;return false;} //Tillader 1 og 2 som første tal i årstal

var cy = curDate.getFullYear().toString().charAt(0);
if (charCode<49 || (charCode-48)>cy){repeatRemove++;return false;} //Tillader 1 og 2 som første tal i årstal

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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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