Keskustelu: Nettisivujen teko: JS: Tekstikenttä jossa vain numeroita ja yksi piste "."

Tekstikenttä, johon sallitaan vain numerot ja mahdollisesti vain ja ainoastaan yksi piste ".". Ei muita merkkejä tai ei enempää pisteitä.

Ideoita?

Tässä tarkistus säännöllisellä lausekkeella:

<script>
function tutki(t) {
    if (t.value.search(/^[0-9]*\.?[0-9]*$/) == -1) {
        alert("Virhe!");
    }
}
</script>
<input type="text" onchange="tutki(this)">

Nykyään voisi käyttää ensisijaisesti HTML5:n pattern-tarkistusta, joka on käyttäjän kannalta paljon miellyttävämpi kuin tuollainen alert. Lisätietoa on esim. sivustolla http://html5pattern.com/. Vanhoja selaimia varten voi sitten laittaa JS-koodin.

Ok.

Itse asiassa tuossa olisi myös sellaisia ehtoja kuin

- pisteen jälkeen saisi olla vain kaksi desimaalia (myös nollia)
- ennen pistettä pitää olla ainakin yksi numero (myös nolla)
- ennen pistettä ei saa olla useampia kuin yksi 0, jos ainoa numero ennen pistettä on 0

Miten tällaisen toteutus?

Täyttäisikö tämä jo kaikki tarpeet:

<input type="text" pattern="(0|[1-9][0-9]*)(\.[0-9]{1,2})?" />

Jos haet kenttää, johon voi syöttää vain desimaalilukija, voit käyttää number-tyyppistä tekstikenttää:

<input type="number" step="0.01" min="0">

Step-attribuutti määrittää lukujen tarkkuudeksi sadasosat eli luvut ovat kaksidesimaalisia.

Attribuutti min määrittää kentän pienimmäksi sallituksi arvoksi 0:n, sillä ilmeisesti haluat sallia vain epänegatiiviset luvut.

HTML5 kirjoitti:

Jos haet kenttää, johon voi syöttää vain desimaalilukija, voit käyttää number-tyyppistä tekstikenttää:

Joka on siis working draft -vaiheessa vasta, eikä esimerkiksi uusin Firefox tue sitä vielä ja muissakin selaimissa tuki saattaa olla puutteellinen.

Metabolix kirjoitti:

Täyttäisikö tämä jo kaikki tarpeet:

<input type="text" pattern="(0|[1-9][0-9]*)(\.[0-9]{1,2})?" />

Kiitos! Tämä olikin juuri sitä mitä hain.

Käytä mielummin näin, mobiililaitteita varten:

<input type="number" pattern="(0|[1-9][0-9]*)(\.[0-9]{1,2})?" />

Olli kirjoitti:

Käytä mielummin näin, mobiililaitteita varten:

<input type="number" pattern="(0|[1-9][0-9]*)(\.[0-9]{1,2})?" />

Pattern-määrite ei ole sallittu, kun input-elementti on number-tilassa. HTML5 CR, kohta 4.10.5.1.13.