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

Automatyczne usuwanie spacji w inpucie

VPS Starter Arubacloud
+1 głos
393 wizyt
pytanie zadane 3 października 2022 w JavaScript przez Piotrek2713 Mądrala (5,320 p.)
edycja 3 października 2022 przez Piotrek2713

Zrobiłem przykładowy formularz w HTML i CSS.

Problem polega na tym, że nie wiem jak zautomatyzować usuwanie spacji, jeśli te pojawią się w inputach o id name i last-name

let userName = document.getElementById('name');
let userLastName = document.getElementById('last-name');
function checkFullName()
{
let userNameField = userName.value;
let userLastNameField = userLastName.value
let correctUserNameField = userNameField.trim();
userNameField = correctUserNameField;
console.log(userNameField+userLastNameField);
}

userName.oninput = checkFullName;
userLastName.oninput = checkFullName;

 

komentarz 3 października 2022 przez VBService Ekspert (251,170 p.)
  1. Spacje w trakcie wpisywania mają być usuwane?
  2. Zablokowanie możliwości użycia spacji?
  3. Usunięcie spacji z tekstu pobranego z input-a?

2 odpowiedzi

0 głosów
odpowiedź 3 października 2022 przez VBService Ekspert (251,170 p.)
edycja 3 października 2022 przez VBService
 
Najlepsza

Możesz np. za pomocą keydown i keyCode (32 - dla spacji) zablokować wprowadzanie spacji.

przykład

<input type="text" name="user-name">
<input type="text" name="user-last-name">

<script>
  const userName = document.querySelector('[name="user-name"]'),
        userLastName = document.querySelector('[name="user-last-name"]');
  
  userName.onkeydown = spaceKeyNotAllowed;
  userLastName.onkeydown = spaceKeyNotAllowed;

  function spaceKeyNotAllowed(e) {
    if (e.keyCode == 32) return false;
  }
</script>

lub

  function spaceKeyNotAllowed(e) {
    return e.keyCode != 32;
  }

 

komentarz 3 października 2022 przez Wiciorny Ekspert (269,120 p.)
split na spacje i połączyć bez xD ~efficient.
2
komentarz 3 października 2022 przez Comandeer Guru (599,730 p.)

Jeśli chodzi o reagowanie na zmiany w zawartości pól tekstowych, to akurat zdarzenia klawiatury, takie jak keydown, de facto nigdy nie są dobrym rozwiązaniem. Z prostej przyczyny: reagują tylko na naciśnięcie klawiszy klawiatury. A spację można dodać też choćby wklejając ją w pole przy pomocy menu kontekstowego, całkowicie omijając klawiaturę. Dodatkowo blokowanie spacji psuje np. opcję wstawiania kropki na macOS-ie po naciśnięciu podwójnej spacji (kropka się wstawia, ale selekcja jest w złym miejscu). I właśnie dla takich przypadków powstały tzw. input events. Najczęściej wykorzystywanym jest bez wątpienia input, ale to niejedyne zdarzenie tego typu. Istnieje jeszcze beforeinput, który różni się od input tym, że odpala się przed zmianą zawartości pola tekstowego, nie zaś – po. I tym samym wydaje się idealnym kandydatem do wykorzystania tutaj, by zablokować dodanie spacji do pola: https://codepen.io/Comandeer/pen/qBYKryP

Żeby wykryć, czy użytkownik chce wstawić spację do pola, używam event.data, czyli informacji o tym, jakie dane mają trafić do pola (trzeba sprawdzić, czy ta informacja jest dostępna, bo np. w czasie usuwania ta własność jest ustawiona na null). Sprawdzam je przy pomocy String#includes(), dzięki czemu wykryję nie tylko przypadek, w którym użytkownik po prostu wpisze spację (wtedy event.data === ' '), ale też m.in, przypadek, gdzie wklei dłuższy tekst zawierający spację (np. 'da Vinci'). Jeśli spacja zostanie wykryta, anuluję domyślne zachowanie (event#preventDefault()), dzięki czemu tekst ostatecznie nie wstawia się do pola.

Warto też zauważyć, że używam do dołączania zdarzeń addEventListener(), dzięki czemu mogę dołączać dowolną liczbę handlerów, w przeciwieństwie do sposobu z on.

Niemniej wielką wadą beforeinput jest to, że to rozwiązanie all or nothing – albo akceptujemy całą treść, albo nie akceptujemy jej wgl. Nie da się zmienić event.data i wstawić do pola np. treści z usuniętymi spacjami. Tutaj trzeba wykorzystać zdarzenie input, które odpala się po wstawieniu treści do pola. I w sumie @Piotrek2713 bardzo dobrze kombinował – jedyne, czego tak naprawdę zabrakło, to dodania zmienionej zawartości z powrotem do pola:

function checkFullName()
{
let userNameField = userName.value;
let userLastNameField = userLastName.value
let correctUserNameField = userNameField.trim();
userName.value = correctUserNameField;
}

Niemniej znów: to pokryje tylko przypadki, gdy użytkownik tę spację po prostu wpisze. Żeby pokryć też m.in. wklejenie dłuższego tekstu ze spacjami w środku, warto zamieniać wszystkie spacje na pusty ciąg → https://codepen.io/Comandeer/pen/WNJyjeb

Wykorzystuję tutaj event.target, żeby pobrać wartość z aktualnie zmienianego pola i String#replaceAll(), żeby zamienić wszystkie spacje na "nic" ('').

Niemniej to wciąż będzie sztuczka, która jest IMO dość inwazyjna UX-owo + niekoniecznie jest zgodna z rzeczywistymi nazwiskami i imionami. Pomysł z komunikatem z walidacji podsunięty przez @ScriptyChris wydaje się zdecydowanie lepszy.

PS akurat zdarzenia klawiatury od pewnego czasu mają własności key i code, które są o wiele sensowniejsze w użyciu, niż stary keyCode.

+1 głos
odpowiedź 3 października 2022 przez ScriptyChris Mędrzec (190,190 p.)
Jeśli spacje są błędne z perspektywy API (backend), to raczej lepiej jest powiadomić użytkownika (jakimś komunikatem w formularzu), że nie może używać spacji - i niech usunie je sam - niż zamieniać je automatycznie, bo to może zmylić użytkownika.
1
komentarz 3 października 2022 przez Comandeer Guru (599,730 p.)
Pomijam tutaj fakt, że usuwanie spacji z danych osobowych jest dość naiwne same w sobie. Przykład pierwszy z brzegu: Leonardo da Vinci.

Podobne pytania

0 głosów
2 odpowiedzi 841 wizyt
pytanie zadane 18 października 2019 w C i C++ przez Karpik Użytkownik (680 p.)
0 głosów
2 odpowiedzi 8,595 wizyt
pytanie zadane 3 stycznia 2018 w Java przez Kabuuz Bywalec (2,820 p.)
0 głosów
1 odpowiedź 1,236 wizyt
pytanie zadane 29 października 2020 w C i C++ przez Billy Użytkownik (680 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...