[Joomla] input type="number" Nie działa w firefox Opcje

[czarnyblack]

Witam.


Posiadam gotowy komponent dla Joomla i chciałem zmienić w nim pole tekstowe, żeby można było wprowadzać w nim tylko cyfry. Zmieniłem wpis type="text" na type="number". W chromie to działa, niestety w firefoxie nie i nie potrafię sobie z tym poradzić. Z tego co zdołałem doczytać, w firefoxie i tak po zmianie na "number" rozponaje tam też litery.


Poniżej kod pliku .xml

[HTML] pobierz, plaintext 
<?xml version="1.0" encoding="utf-8"?>
<form>
<fieldset name="details" addfieldpath="/components/com_easyappointment/models/fields">
<field name="name" type="text"
            class="form-control booking-form" required="true"
            description="COM_EASYAPPOINTMENT_NAME"
            label="COM_EASYAPPOINTMENT_NAME" validate="" />
 
<field name="email" type="text"
            class="form-control booking-form"
            description="COM_EASYAPPOINTMENT_EMAIL"
            label="COM_EASYAPPOINTMENT_EMAIL" validate="/^[A-Za-z0-9-\._]{1,}@[\w-\.]*\.[\w]{2,}$/" />
 
<field name="phone" type="number" 
            class="form-control booking-form"
            description="COM_EASYAPPOINTMENT_PHONE"
            label="COM_EASYAPPOINTMENT_PHONE" validate="/[\d\s.\-()+]*/" />
 
 
<field name="address" type="number" 
            class="form-control booking-form"
            description="COM_EASYAPPOINTMENT_ADDRESS"
            label="COM_EASYAPPOINTMENT_ADDRESS" validate="" />
 
<field name="comments" type="textarea"
            class="form-control booking-form" 
            description="COM_EASYAPPOINTMENT_COMMENTS"
            label="COM_EASYAPPOINTMENT_COMMENTS" validate="" />
</fieldset>
 
<fieldset name="details-hidden">
<field name="appointmentDate" type="hidden" required="true" validate="/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/" />
<field name="startingTime" type="hidden" required="true" validate="/^[0-9]{1,}$/" />
<field name="endingTime" type="hidden" required="true" validate="/^[0-9]{1,}$/" />
<field name="staff" type="hidden" required="true" validate="/^[0-9]{1,}$/" />
<field name="service" type="hidden" required="true" validate="/^[0-9]{1,}$/" />
</fieldset>
</form>
[HTML] pobierz, plaintext 

[freemp3]

Niestety firefox tak interpretuje pole typu "number" i tego nie zmienisz. Jedyne pocieszenie jest takie, że w przypadku wprowadzenia tekstu formularz nie zostanie wysłany, a pole zostanie podświetlone na czerwono.
Zamiast tego możesz dodać jakiś walidator w js, który będzie sprawdzał wprowadzane wartości i blokował wprowadzenie tekstu.

[czarnyblack]

Dzięki za naprowadzenie. Znalazłem coś takiego:

http://jsfiddle.net/Lm2hS/

W jaki sposób wykorzystać to w moim przypadku?

[freemp3]

W taki jak jest w podanym przez Ciebie przykładzie

Jeśli masz więcej tego typu pól i nie chcesz do każdego z nich dodawać tego ręcznie możesz w jakimś globalnym pliku z skryptami JS przypisać tą funkcję z przykładu do zdarzenia "onkeypress", dla wszystkich pól typu "number".

[czarnyblack]

No dobrze, próbowałem znaleźć jakieś informacje, ale nawet nie wiem jak zacząć szukać. Specjalnie kupiłem gotowy komponent żeby nie musieć kombinować, nawet zapytałem tego co go tworzył i odpisał mi, że w firefox to nie działa i tyle ; ) Także skoro on nie jest w stanie mi pomóc to sam zacząłem kombinować, ale programistą nie jestem i niestety mam z tym problem. Nie do końca rozumiem, czy maja to być dwa osobne pliki i w tym moim pliku xml mam wskazać na .js? Próbowałem w ten sposób i nie działa. Mam tylko jedno pole textowe.

[viking]

A jaki to problem? Firefox i tak nie pozwoli wysłać tego formularza, wyświetli wcześniej błąd.

[czarnyblack]

To jak w takim razie ma to być rozwiązane żeby działało w Firefox?

[freemp3]

Jeśli masz tylko jedno takie pole to po prostu dodaj do niego ten fragment odpowiedzialny za sprawdzanie

Kod

onkeypress="return isNumber(event)"

Oprócz tego, skoro to jest gotowy komponent, znajdź jego główny plik js i dodaj na samym końcu funkcję sprawdzającą:

Kod

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

Tak jak napisał @viking, pytanie, czy jest to w ogóle potrzebne? Firefox nie wyśle formularza jeśli w tym polu będzie tekst.

[czarnyblack]

Wiem, ja też byłbym zdania żeby tego nie zmieniać skoro i tak dalej nie puszcza formularz, ale to zalecenia odgórne i niestety muszę to zmienić.

Zrobiłem tak jak napisałeś. Mam pliki information.xml i information.js niestety po dodaniu tych linijek zero efektu.

[freemp3]

Sprawdź czy w wygenerowanym formularzu przy polu "number" jest ta modyfikacja oraz czy plik information.js jest załadowany na tej stronie. Jeśli tak sprawdź czy jest w nim kod z funkcją. Odśwież też cache przeglądarki.