Wątek przeniesiony 2023-06-12 00:10 z JavaScript przez Riddle.

Pole do wpisywania jedynie liczb

0

Hej, pomoże ktoś z kodem jeśli zmienimy input z type="string" na type="number" wtedy kod nie działa walidacja nie wykonuje się

https://jsfiddle.net/pw3kg0r2/

4

Będzie ciężko, ponieważ wpisanie w input type number "35e" powoduje, że w teorii jest to prawdopodobnie w przyszłości poprawna wartość np. "35e1" (notacja wykładnicza) - ale w tej chwili jeszcze nie jest. Więc odczytując bieżącą wartość przez input.val() dostajesz "" (pusty string). Pusty string wg Twojego kodu będzie poprawną wartością, w końcu wyczyścić ktoś pole też mógłby chcieć przy pisaniu, więc to ma sens.

Nie wiem czy jest jakaś możliwość odczytania takiej wartości w trakcie pisania.

Input type number odsiewa większość niepoprawnych rzeczy, więc bardzo bym się nie przejmował notacją wykładniczą i miejscami po przecinku. Popraw wartość, utnij miejsca po przecinku na evencie blur, gdy użytkownik "wyjdzie" z pola.

0

Rozumiem ale nie da się napisać innego regexa dla type="number"?

1

Ale to nie chodzi o regexa tylko o odczytanie wartości w trakcie wpisywania.

Żaden regex się nie nada, jeżeli ma pracować na pustym stringu zamiast "prawdziwych" danych

0

Hm.

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onkeypress Event</h2>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input id="numeric_input_id" type="text" onkeyup="myFunction(event)">

<script>
tekst=[];
position=0;
function myFunction(event) {
  tmp_tekst="";
  tmp = event.key;
  
  if(tmp.charCodeAt(0)>=48 && tmp.charCodeAt(0)<=58){tekst[position]=tmp;position++;}
document.getElementById("numeric_input_id").value="";
for(let u=0;u<position;u++){tmp_tekst+=tekst[u];};
document.getElementById("numeric_input_id").value=tmp_tekst;
}
</script>

</body>
</html>
1

Twój <input/> nie ma type="number", ta odpowiedź jest nie na temat.

0

"Hej, pomoże ktoś z kodem jeśli zmienimy input z type="string" na type="number" wtedy kod nie działa walidacja nie wykonuje się" - teraz type jest string, walidacja się wykonuje. Co jest nie tak?

1

To jest nie tak, że na type string oryginalny kod działa. Nie potrzeba drugiego. Trzeba taki, który działa z type=number.

0

A to zabawne, że o tym rozmawiamy, bo 2 godziny temu robiłem inputa na numer i przeszkadzały mi strzałki. Dałem nieedytowalnego diva i 2 przyciski z prawej strony + i -. Nie ma lepszej walidacji chyba.

0

Dobrze można pattern = RegExp('^\\d+$') potem pattern.exec('2345'), nigdy nie spotkałem się z przypadkiem gdzie usuwa się input użytkownika jeśli jest niepoprawny, można też zasygnalizować czerwonym border colorem. Sam html też posiada wewnętrzne mechanizmy validacji, rzadko z tego korzystam, ale wiem, że można samym tagiem wymusić taką rzecz. Tag HTML3.

1

@TheWypierdzisty: zrób sobie inputa type=number wpisz "1e", a potem w javascript odczytaj wartość, jak dostaniesz "1e" to problem rozwiązany, jak nie to szkoda gadać o jakichś regexpach

0

@dzek69: do notacji naukowej, trzeba by specjalny case zrobić, a jeszcze coś jest do uwzględnienia? hmm jak nie pozwala się na znaki inne prócz 0-9 to jak taką notacje zapisać? oczywiście można zapisać rozwiniętą

1

Ale jak masz nie pozwolić na znak "e", kiedy po wpisaniu "1e" nie możesz odczytać zawartości jako "1e", więc nie ma jak tego zabronić? Możesz co prawda zabronić "e" w ogóle na "keydown", bez odczytywania zawartości inputa, ale "e" można przemycić też poprzez wklejenie. I znowu dochodzisz do momentu, gdzie w inpucie masz "1e", ale nie możesz tego odrzucić, bo wartość pobrana z inputa wyniesie "" (pusty string).

0

Nie wiem o czym teraz jest problem, przecież te notacje łatwo zrobić jeśli tylko jest type="string", a nie type="number".

<input type="text">
document.querySelector("input").value = "1e1"
let value = Number(document.querySelector("input").value)

I notacja naukowa działa

1

Ale cała podstawa problemu jest taka, że chcemy type=number 🤦‍♂️

Czemu zniżamy się do poziomu jakiejś elektrody? Nie ma nic niepoprawnego w type=number, wręcz przeciwnie - jest wiele zalet (klawiatura ekranowa domyślnie w trybie liczb, możliwość ustawienia step, kontrolki do przełączania i obsługa scrolla, dodatkowa informacja do dostępności (a11y)), więc jeżeli takie są założenia to ich nie zmieniajmy.

No i ja twierdzę, że nie da się tego osiągnąć co chce OP, jak ktoś twierdzi, że się da to prosimy o udowodnienie. A przykłady z type=text (nie string btw) to sam OP ma działające.

0

Ja nie rozumiem. Jeżeli pole jest wymagane to po co przejmować się tym "1e" nawet jak zwraca pusty string? Pusty string - błąd walidacji i tyle

1

Pusty string jest trochę równoważny z "użytkownik dopiero zaczął wpisywać", więc gdyby to była walidacja to słabe rozwiązanie uxowo

Inna sprawa, że OP filtrowanie nazywa walidacją :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1