• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kod pocztowy i wstawianie kreski między cyframi

VPS Starter Arubacloud
0 głosów
2,915 wizyt
pytanie zadane 31 maja 2019 w JavaScript przez francus11 Gaduła (3,250 p.)
Cześć. Czy ma ktoś pomysł na to, jak zrealizować automatyczne wstawianie kreski pomiędzy liczbami w kodzie pocztowym, czyli np. 11-111. Pewnym substytutem jest użycie pattern przy inpucie, ale wtedy trzeba ręcznie dać myślnik. Sądzę, że to da się zrobić w JS, ale jeśli będzie to zrealizowane w HTML to nie będzie mi przeszkadzało, a nawet bardziej mi się spodoba.

2 odpowiedzi

0 głosów
odpowiedź 1 czerwca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Sądzę, że to da się zrobić w JS, ale jeśli będzie to zrealizowane w HTML to nie będzie mi przeszkadzało, a nawet bardziej mi się spodoba.

podstawowy błąd - usilnie zapinasz się już na starcie ze chcesz problem X rozwiązać w technologii Y. Nigdy tak nie rób. Zawsze najpierw analizuj dokładnie tzw. założenia biznesowe problemu a dopiero potem dobieraj do tego technologię.

A co do problemu to możesz np. nasłuchiwać na keydown i dodawać dynamicznie myślnik ale to nie jest do końca dobre rozwiązanie - w sensie ogólne założenie z tym myślnikiem. Taka forma zapisu kodu pocztowego nie występuje w każdym kraju i swoją implementacją mocno ograniczasz możliwości wpisywania kodu przez obcokrajowców.

Jeśli już się na to upiersz to daj dodatkowo np. pole na wybór kraju, by default ustawione na Polskę i tylko dla PL odpalaj taką waildację podczas wpisywania. Poczytaj sobie o zdarzeniach w JS i ich obsłudze. Ciężko coś konkretniej doradzić bo nie wiem na jakim jesteś poziomie z JS.

0 głosów
odpowiedź 1 czerwca 2019 przez dawid6512 Gaduła (4,550 p.)
edycja 1 czerwca 2019 przez dawid6512

To jest skrypt na tak naprawdę 3-4 linijki:

Jak to zrobić?

1. Wywołaj funkcję na dany input po wciśnieciu klawisza

2. Sprawdz w funkcji czy dlugość value inputa jest równa = 2

3. Jeżeli tak dodaj do value -

 

$("#kod-pocztowy").on("keyup", function(){
       if($(this).val().length == 2) {
           $(this).val($(this).val() + '-');
       }
    });

 

komentarz 1 czerwca 2019 przez Tomek Sochacki Ekspert (227,510 p.)
nie chce mi się szczerze testować tego, ale zastanawiam się czy nie zapomniałeś o przypadku usuwania znaków? To znaczy zobacz co się stanie jeśli wpiszę kod, np:

11-123

i zacznę go usuwać (bo np. pomyliłem się i chcę zmienić) - czy Twój skrypt nie zatrzyma czasem usera na znaku myslnika?

I druga sprawa to czy w ogóle na pewno to zadziała na change? Wydaje mi się, że lepiej byłoby na keydown ale mogę się mylić, a na mobile nie chce mi się bawić na codepenie.
komentarz 1 czerwca 2019 przez dawid6512 Gaduła (4,550 p.)
o no patrz, pomyłka powinna byc keyup /poprawione

tak zatrzyma, ja dałem mu taką podstawę, a jak chce rozbudować to już musi pomyśleć D:

można to np zrobić

1. jeżeli został wciśniety backspace

2. jeżeli długość value == 3

3. usuń ostatni znak
komentarz 1 czerwca 2019 przez Tomek Sochacki Ekspert (227,510 p.)
spoko :) ale coś mi się mimo wszystko wydaje, że ten skrypt nie pozwoli Ci usunąć wszystkich znaków w razie pomyłki i zblokuje Cię na znaku myślnika... kurcze aż bede musiał odpalić PC i to sprawdzić chyba :) spróbuj wpisać kod i potem go usuwać backspace... da się usunąć do zera aby od nowa wpisać, nie będzie próbował z automatu dodawać myślnika gdy go usuniesz?
komentarz 1 czerwca 2019 przez dawid6512 Gaduła (4,550 p.)

może troche barbarzyński sposób i kod ale taki na szybko , tutaj lepsze będzie keydown

Tu masz link : https://jsfiddle.net/amch5t1f/

$("#kod-pocztowy").on("keydown", function(){
        var key = event.keyCode || event.charCode;
        if( key == 8 || key == 46 ){
            if($(this).val().length == 4) {
                $(this).val($(this).val().slice(0,-1));
            }
        }else{
            if($(this).val().length == 2) {
                $(this).val($(this).val() + '-');
            }
        }

    });

 

komentarz 20 maja 2020 przez MateuszMsoft Nowicjusz (100 p.)

Uzupełnione o przypadek, w którym user wpisuje myślnik w kodzie pocztowym

$("#post_code").on("keydown", function(){
        var key = event.keyCode || event.charCode;
        if( key == 8 || key == 46 ){
            if($(this).val().length == 4) {
                $(this).val($(this).val().slice(0,-1));
            }
        }else{
            if($(this).val().length == 2 && key != 189) {
                $(this).val($(this).val() + '-');
            }
        }
    });

 

Podobne pytania

0 głosów
1 odpowiedź 1,656 wizyt
pytanie zadane 14 stycznia 2019 w PHP przez Krzysztof Narczynski Początkujący (370 p.)
0 głosów
0 odpowiedzi 129 wizyt
0 głosów
1 odpowiedź 1,201 wizyt
pytanie zadane 7 listopada 2018 w HTML i CSS przez TracerYT Początkujący (440 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...