Wątek przeniesiony 2016-07-26 21:34 z Webmastering przez dzek69.

Sprawdzanie wartości z input'a

0

Witam,
chciałbym stworzyć "dynamiczną" kontrolę wartości w polu

 <input type="text"  id="kwota" placeholder="maks. 52 175"> 

w ten sposób, że gdy użytkownik wprowadzi wartość większą niż 52175 to zmieni się tło pola lub czcionka na czerwony. Chcę aby działo to się na bieżąco, bez użycia przycisku.
Moje doświadczenie z js to zaledwie kilka dni, więc proszę o wyrozumiałość.

z tego co się zorientowałem to mógłbym to zrobić w jQuery lub angularze.
Znalazłem taki kod: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_validate_custom
Potrafię zmienić warunek tam na if(parseFloat(value) > 52175), natomiast dalej nie potrafię użyć tego do zmiany stylu input'a.

Bardzo proszę o zweryfikowanie mojego myślenia i naprowadzenie mnie w dobrym kierunku.
Z góry dzięki ;)

1

Możesz zrobić chociażby cos takiego:

<h1  ng-class="{'validation-class':!myForm.myInput.$valid}">{{myForm.myInput.$valid}}</h1>
1
<input type="text"  id="kwota" placeholder="maks. 52 175">
<script>
	let el = document.querySelector("#kwota");
	el.addEventListener("keyup", (e) => {
		if(el.value > 52175) {
			el.style.background = "red";
		}else{
			el.style.background = "white";
		}
	});
</script>

W linijce, gdzie jest el.style możesz sobie dopisać dowolną nazwę stylu jaką chcesz zmienić. Możesz zastosować atrybut dataset, żeby zmieniać wartości dla innych inputów. Jak coś to pisz.

0

Wielkie dzięki, działa jak należy ;) ale mam parę pytań:
1.czym się różni

 let el = document.querySelector("#kwota");

od var el = document.querySelector("#kwota");

2. czym się różni chwyt 
```javascript
document.querySelector("#kwota")

od document.getElementById("kwota")

obie wersje działają u mnie tak samo.

Natomiast tej linijki nie rozumiem 
```javascript
el.addEventListener("keyup", (e) => 

i czy mógłbym prosić o objaśnienie lub jakiś link jeśli macie pod ręką?

edit: a, i jaka jest różnica między wykonaniem tego w angularze, a czystym js?

0

Wpisz te frazy w google i znajdziesz odpowiedź...

A jeśli chodzi o różnice... to używanie angulara w tym przypadku to totalne przegięcie. To tak jak byś do wykopania dziury w ziemi zamiast łopaty użył jakiegoś działa protonowego pożyczonego od US Army...

1

Jest to nowy "dodatek" do ES6. Poczytaj o es6 a zobaczysz, że ułatwia to pracę. QuerySelector to to samo co w jQuery $. A Ta linijka

el.addEventListener("keyup", (e) => 

To dodanie nasłuchiwania zdarzeń na jakiś element. (e) => to skrócona wersja zapisu funkcji. W es5 normalnie się daje
el.addEventListener("keyup", function(e) {}); Co do różnic to żadna. W angularze chyba nawet jest metoda nasłuchująca elementy DOM ale nie wiem. Jakoś zbytnio nie korzystałem z angulara.

0

dzięki, bardzo mi pomogłeś ;)

0

Edit:

OK, post nieaktualny, źle zrozumiałem treść pierwszego posta i okazuje się, że OP jest z niczym, a nie z projektem w angularze. Wobec tego proponowane rozwiązanie jest takie sobie, ale nie jest zbrodnią.

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