Automatyczne usuwanie spacji w inpucie

Question

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;

 

Comments

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?

Answer 1

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;
  }

 

Comments

split na spacje i połączyć bez xD ~efficient.

---

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.

Answer 2

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.

Comments

Pomijam tutaj fakt, że usuwanie spacji z danych osobowych jest dość naiwne same w sobie. Przykład pierwszy z brzegu: Leonardo da Vinci.