Input felt > kun tal

Ja, det kan man godt :)

Jeg har for nylig svaret på et lignende spørgsmål med et kodeeksempel. Svaret finde her:

http://www.eksperten.dk/spm/627199

Det var da en forfærdeligt masse kode for at gøre dette... kan det ikke gøres mere enkelt?

Jo, du kan bare fjerne det kode du synes er overflødig - det er ikke et krav at man sætter kontrollen op på den måde jeg har gjort, men jeg synes bare det var så rart at man blot skal tildele en klasse til de kontroller man vil have validering på og så ikke ændre på noget andet... men det er jo en smagssag :)

Er det hele koden du synes er voldsom eller er det bare fordi der ligger meget kode på selve formular-siden?

hehe tror mest det er fordi jeg er en klovn til javascript.. bruger det sjældent.

Kan du give et eksempel på en funktion jeg kan tilføje til mit input felt, som udelukkende gør at man kun kan indtaste tal - on-the-fly...

Der må da iøvrigt være penge i at være javascript-nørd... der er jo næsten ingen der kan finde ud af det ;)

Tag dette script og gem det i en fil der hedder fieldvalidate.js

// ============================================================
// Sørger for at indholdet i et felt er numerisk.
// Feltet skal være af klassen floatinput eller numinput.
// floatinput tillader 0 eller 1 komma og tal.
// numinput tillader kun tal og altså ikke komma.
// ============================================================
function ensureNumeric()
{
    function isAllowed(ord, allows)
    {
        var bRes = false;
        bRes = allows.indexOf("," + ord + ",") > -1;
        return bRes;
    }
   
    var elm = event.srcElement;
    var ord = event.keyCode;
    var allowed = ",8,9,35,36,37,38,39,40,46,48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105,";
    if(elm.className == "floatinput" && elm.value.indexOf(",") < 0)
        allowed += "110,188,";
       
    if(!isAllowed(ord, allowed))
    {
        event.returnValue = false;
    }
    window.status = ord;
}

// ============================================================
// Formatterer indholdet af et numerisk felt, så det sikres at
// tal indtastet er valide heltal eller kommatal.
// Hvis der på input-feltet er defineret en attribut som hedder
// "minvalue" kan feltets værdi ikke være mindre end denne.
// ============================================================
function formatNumeric()
{
    var elm = event.srcElement;
   
    if(elm)
    {
        var minval = elm.getAttribute("minvalue") + "";
        var v = parseFloat("0" + elm.value.replace(",","."));
        if(minval != "")
            if(v < minval)
                v = parseFloat(minval);                   
        elm.value = v.toString().replace(".",",");
    }
}

Tag derefter inkludere dette script i HTML-siden vha. linien:

<script type="text/javascript" src=""></script>

Derefter tilføjer du eventhandlers for onkeydown og onblur som følger:

<input type="text" value="4" minvalue="1" ID="txtColumns" NAME="txtColumns" onkeydown="ensureNumeric()" onblur="formatNumeric()">

Hvis du sætter inputfeltets class-attribut til "floatinput", håndhæver rutinen "ensureNumeric" kommatal (hvilket betyder at det også er tilladt at indtaste 0 eller 1 komma). Attributten "minvalue" er en mindsteværdi som feltet skal antage, hvis der angives en mindre værdi sættes indholdet til værdien i "minvalue".

Mht. om der er penge i at være javascript-nørd... tjaaa, så må jeg være dig svar skyldig - jeg har aldrig prøvet at have det som min primære beskæftigelse ;)

Møj!

Scriptet skal naturligvis inkluderes med linien:

<script type="text/javascript" src="fieldvalidate.js"></script>

Hej -

Det er et meget interessant script softspot har leveret.
Tænk, jeg har aldrig før mødt en indlejret funktion i Javascript! Jeg har efterlyst muligheden, men troede slet ikke at den fandtes.

Nå, til sagen.

Jeg synes jeg kan høre, at crapman gerne vil have et supersimpelt script.
Derfor har jeg leget lidt med softspot's kode (som indeholder en hel del ukendte udtryk for mig!)

Jeg har kortet det ned til et lille dokument, som kun godkender CIFRE (altså ikke noget med decimaltal).

Koden virker desværre kun i Internet Explorer. Men det samme tror jeg gælder crapman's kode. Hvis nogen af jer har et Cross-Browser alternativ, vil jeg gerne se det.

<!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">
    <title>Check Numerisk</title>
<script type="text/javascript">
function CheckCiffer()
{
keychar=parseInt(String.fromCharCode(event.keyCode))
event.returnValue = (keychar >= 0)
}
</script>
</head>
<body>
<form onsubmit="alert('Du vejer: '+window.document.getElementById('id1').value+' kg')">
<input type="text" id="id1" onkeydown="CheckCiffer()">
<button type="submit">SEND</button>
</form>
</body>
</html>

Hilsen  Per

Og venligst bær over med, at jeg skriver "crapman's kode" når jeg mener "softspot's kode" ...

>>per

-- hvad mener du med 'indlejret funktion' ?-)

roenving skriver:
> hvad mener du med 'indlejret funktion'?

At en funktionserklæring indeholder en anden funktionserklæring:
function ensureNumeric() indeholder function isAllowed(ord, allows).

Jeg troede bare ikke man kunne gøre det. (Måske er det en nyere facilitet. Måske har den hele tiden været der. Jeg har bare ikke været opmærksom på den. I programmeringssproget Pascal brugte vi den.)

Hilsen  Per

-- det er den type objekt-orienteret programmering, man kan lave i javascript ...

-- hvis man skal skabe objekter skal man erklære en constructor som en funktion, og der kan man så direkte have eventuelle metoder, eller man kan prototype sig til dem !-)

-- og prototype har været med længe, såvidt jeg umiddelbart kan bedømme må det være javascript 1.1 !o]

<ole>

Njahh ... det er nu ikke kun i OOP-sammenhænge, man kan bruge nestede funktioner:

function a() {
  // Noget JS

  function b() {
      // noget andet JS
  }
}

Her kan 'a' kaldes, globalt - mens 'b' tilhører a's scope og kun kan kaldes lokalt, herfra

/mvh
</bole>

- det kan f.eks. bruges, hvis man har en større funktion med flere/mange små, tilhørende hjælpe-funktioner, som man nødigt vil have liggende og 'flyde' i det globale scope  :)

per1291 -> Din funktion fungerer NÆSTEN perfekt.. Man kan dog ikke trykke på backspace, del eller piletasterne.. Er det noget man kan lave?

crapman -> Det er ikke min kode, det er kun en discount-udgave af softspot's kode.
softspot's kode kan det hele! Erstat funktionen med denne:

function CheckCiffer()
{
    var ord = event.keyCode;
    var allowed = ",8,9,35,36,37,38,39,40,46,48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105,";
    if (allowed.indexOf("," + ord + ",") < 0) {event.returnValue = false;}
}

Helt kanon, nu virker det - hvor findes der en liste over hvilke taster der har hvilket nummer/id?

Smid et svar begge to, så deler jeg pointene.. :)

Nej tak, det er softspot's løsning ...

Pointfordeling efter dit valg :)

Takker for point :)