×
Creating solutions

Ako v textboxe a texarea detegovať biele miesta (JavaScript)

V tomto článku som sa zameral na detekciu bielych miest v používateľskom vstupe. Cieľom je zistiť, či používateľ okrem bielych miest napísal aj iný znak. Tento druh detekcie je napríklad užitočný ak je vstup použitý ako link. Ak používateľ vložil len biele miesta (medzera, tabulátor, zalomenie riadku), tak link vytvorený z poľa formulára nebude viditeľný. Pre zamedzenie tohto javu predstavím nasledujúce riešenie.
Pre demonštráciu použijem knižnicu jQuery. Príklad pozostáva z dvoch polí a to textbox a textarea. Pre každé pole je vytvorené tlačidlo na testovanie a výsledok je vypísaný na konci. Obe polia vypisujú výsledok v rovnakom elemente.
Príklad: Vytvorenie polí formulára, tlačidiel a elementu pre výstup.
1
2
3
4
5
6
7
8
9
10
11
12
<div>
<input id="fieldInput">
<br>
<button id="btnInput">Detect</button>
</div>
<br>
<div>
<textarea id="fieldTextarea"></textarea>
<br>
<button id="btnTextarea">Detect</button>
</div>
<div id="result"></div>
Pre detekciu bielych miest stačí zápis value.trim() == "" && value.length. V príklade som ho rozšíril aj o detekciu používateľského vstupu, takže budem kontrolovať či používateľ zadal okrem bielych miest aj dáky iný znak.
Príklad: Detekcia vstupu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function checkValue(id) {
var value = $("#" + id).val();
if ((value.trim() == "" && value.length) || value.length == 0) {
$("#result")[0].innerHTML = "Insert text";
} else {
$("#result")[0].innerHTML = "Thank you";
}
}
$("#btnInput").on("click", function () {
checkValue("fieldInput");
});
$("#btnTextarea").on("click", function () {
checkValue("fieldTextarea");
})

Záver

Na príklade som okrem detekcie vstupu ukázal aj štýl programovania, kde je aplikovaná len jedna funkcia na detekciu vstupu. O jej správny chod sa stará vstupný parameter. Netreba ale zabúdať, že v praxi sa používa OOP a tak z funkcie je potrebné spraviť metódu a registráciu poslucháčov udalostí je potrebné vložiť do príslušnej metódy, napr. init().


JavaScript,white space,medzera,enter,tabulátor,textarea,textboxm trim(),length,val()
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest