ugrás a tartalomhoz

tizedespont, DEL billentyű megkülönböztetés javascriptben

Blackfriar · 2009. Szep. 13. (V), 06.51
Sziasztok !
A fenti problémába futottam bele és az event.keyCode-dal természetszerűleg nem megy a dolog, hiszen mindkét esetben 46 a kód.

Előre is köszönöm a segítségetek.
‹ tabindex Onclick ›
 ■
1

charCode

vbence · 2009. Szep. 13. (V), 10.01
Tessék megnézni egy referenciát az event objectről, aztán kérdezni :)
2

nem értem

Blackfriar · 2009. Szep. 13. (V), 16.25
A W3-on megint csak az event.keyCode-ot találtam, még példát is mutatnák rá.
A többi helyen csak azt láttam totális káosz van ebben a témában (is). :-)
Böngészőfüggő, keyup, keydown, keypress függő, plusz keyCode, charCode függő.
Most én vagyok hülye vagy tényleg káosz van ?
18

Framework?

janoszen · 2009. Szep. 15. (K), 21.15
Holmi JS framework segíthet, azok a népek hajlandóak voltak végigszívni ezeket. Személy szerint Prototypeban tákolok, ha muszáj (ma pl egy remek kis chat felületet írtam céleszközként) de ha lesz időm (sok) akkor majd megnézem az eddigieknél közelebbről a YUI-t. Igazából persze ugyanazt kellene csinálni, mint a PHPnál (sajátot, hogy minél mélyebben megismerjem a nyelvet), de amióta rendszergazda lettem, sokkal inkább hajlandó vagyok kész cuccokat használni (mivel sokszor időm sincs sajátot írni).
3

Teszt eredmények

Poetro · 2009. Szep. 13. (V), 18.32
$(document).keydown(function (ev) {console.log(ev.keyCode);});
Ezt kipróbálva itt az oldalon a következő eredményre jutottam Fx alatt:
DEL      - 46
,        - 188
.        - 190
Numpad , - 110
Numpad . - 110
Attól függően, hogy milyen nyelv volt beállítva, attól függ, hogy tizedes pont, vagy vessző van a Numerikus részén a billentyűnek, de a billentyű kódja ugyanaz.
$(document).keypress(function (ev) {console.log(ev.charCode);});
Amennyiben keypress-t használok, akkor van charCode is, ebben az esetben:
DEL      - 0
,        - 44
.        - 46
Numpad , - 44
Numpad . - 46
4

még mindig nem értem :-)

Blackfriar · 2009. Szep. 14. (H), 08.06
Egyszerűen képtelen vagyok felfogni, hogy ha egy billentyű lenyomását egy egyszerű szám azonosításával meg lehet oldani, akkor miért ütközik az ember ilyen problémákba. Talán nem állt elegendő szám rendelkezésre a 101 billentyűhöz? Miért kell egy ilyen egyszerű probléma megoldásához különböző trükkökhöz (ami még most sem világos számomra; talán a keyCode, charCode együttes használata?) folyamodni?
5

tipp:

tiku I tikaszvince · 2009. Szep. 14. (H), 11.12
A keyCode nem azt azonosítja, hogy a felhasználó az előtte levő billentyűzeten melyik (létező) billentyűjét ütötte le? A charCode pedig, hogy a billentyű leütés eredményeként megjelenő karakternek mi a kódja.

Nekem gyanús, hogy nyomva tartott Shift/Alt mellett a keyCode ugyanazt fogja tartalmazni, míg a charCode változik. Nem próbáltam, csak tipp, de a két tulajdonság neve nekem ezt sugallja.
6

keyCode

Poetro · 2009. Szep. 14. (H), 11.59
A keyCode azt azonosítja, hogy melyik gomb volt lenyomva, és annak a Unicode-os azonosítójával tér vissza. Érdemes elolvasni a megjegyzéseket is a pontosabb értelmezés érdekében.

A charCode azt azonosítja, hogy a billentyű leütésével milyen karakter leütés lett azonosítva, és ehhez jönnek még a módosítók, hogy pl. a Shift/Alt/Ctrl le volt-e nyomva az adott pillanatban. Amennyiben az adott karakternek nincs Unicode-os azonosítója, akkor a 0-t fogja visszaadni, mint pl. a Del gomb. Érdemes elolvasni a megjegyzéseket is a pontosabb értelmezés érdekében.

Ezen kívül érdemes áttekinteni a KeyEvent táblázatot, amiből kiderül, melyik gombnak mi a keyCode / charCode értéke.
7

sommázat

Blackfriar · 2009. Szep. 14. (H), 19.29
Nos akkor sommázom a szomorú tényt:
Javascripttel nem lehetséges a tizedespont ill. DEL billentyűket megkülönböztetni.
Hogy miért ? Mert a keyCode ill. charCode egyidőben nem elérhető (lásd Poetro által megadott linket).

tizedespont keyCode: 46 charCode: 46
DEL keyCode: 46 charCode: 0

Itt tartunk ma, a 21. században. Két billentyűt nem tudunk megkülönböztetni a 101-ből. Végülis a számok megállnak 79-nél. Ez az egész csak vicc lehet.
8

Különbség

Poetro · 2009. Szep. 14. (H), 20.01
Pedig már meg is különböztetted. A charCode-juk különbözik.
9

:-)

Blackfriar · 2009. Szep. 14. (H), 20.17
A következő néhány billentyű charCode-ja is 0:
Insert, Home, End stb, funkcióbillentyűk, Backspace

Hát skacok ez valahogy nem akar összejönni.
10

keyCode

Poetro · 2009. Szep. 14. (H), 20.28
Ahol a charCode 0 ott a keyCode-ot kell figyelni, és fordítva, nem bonyolult.
11

a kettő együtt nem megy

Blackfriar · 2009. Szep. 14. (H), 20.30
A probléma csak az, hogy vagy a keyCode-ot kérdezed le vagy a charCode-ot. Egyszerre mindkettőt nem lehet.
12

együtt

Poetro · 2009. Szep. 14. (H), 20.31
Miért ne lehetne lekérdezni mindkettőt? Az event objektum tartalmazza őket.
13

ezt olvastam

Blackfriar · 2009. Szep. 14. (H), 20.34
In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both.
14

És ezt

Ustak · 2009. Szep. 14. (H), 22.39
olvastad?

quirksmode.org/js/keys

Üdv:
Gábor
15

köszi

Blackfriar · 2009. Szep. 15. (K), 08.24
No a táblázat nem sokat ér, viszont legalul a teszt, az már döfi.
onkeydown használatakor a keyCode tizedespont esetén 190, DEL esetén 46. Ezzel már lehet kezdeni valamit.
Az azonban továbbra is magas, hogy egy ilyen egyszerű dolog miért van ennyire elbonyolítva.
Köszönet a linkért Gábor!
16

Nincs mit :-)

Ustak · 2009. Szep. 15. (K), 15.16
Egyébként ha belegondolsz, nincs ez túlbonyolítva, szerintem az eredetéhez kell visszamennünk. Nem ismerem a példádat, problémádat, de mondjuk csinálsz egy weboldalt, ami nekem nagyon tetszik, nagyon hasznos. Mondjuk akkor én azt szeretném használni itthonról piciny ubuntum alól firefoxal, vagy konqueror -al (lynx -el nem, nyugi :-)), és a munkahelyemen windows -os gépről ie7+ -al (jó esetben) Angliából angol billentyűzetről, valamint esetleg egy Mac gépről Safari alatt is jó lenne ha elérhetném a funkciókat.
Persze ez utópia, meg nyilván az esetedben nem is fontos, de tervezés során gondolhatunk rá, hogy kiírjunk valahol egy üzenetet ("Kérem nyomja meg a T billentyűt a (T)örléshez!" vagy "Használja a wasd billentyűket a navigációhoz") és máris "web safe" billentyűink vannak.
Persze az adott alkalmazás mindig bonyolíthatja a helyzetet, csak gondoltam ezt ide leírom, mert úgy éreztem belülről fakad :-)
Üdv:
Gábor
17

input

Blackfriar · 2009. Szep. 15. (K), 20.11
Input mezőről van szó és lényeges, hogy a felhasználó ne tudjon hülyeséget bevinni.
19

hogy azért ne legyen teljes az öröm

Blackfriar · 2009. Szep. 16. (Sze), 21.12
Nos az onkeydown-nal megoldódott a két billentyű elkülönítése azonban az onkeypress-szel ellentétben itt meg is jelennek a nemkívánatos karakterek, ezért ezt külön kezelni kell. Tehát még mindig ott tartunk, hogy egy egyszerű feladatot csak körülményesen tudunk megoldani. Ebben az őrült, esztelenül rohanó világban illene ilyesmire odafigyelni.
20

filter

Drawain · 2009. Szep. 17. (Cs), 10.14
Lehet csak te bonyolítod túl a problémát. Miért nem raksz az onkeyupra vagy onkeypressre egy függvényt, ami mindig ellenőrzi az input mező értékét és kitörli belőle a nem oda való karaktereket mondjuk egy regurális kifejezés szabályai alapján. Igaz ekkor megjelenik a lenyomás pillanatában a karakter de egyből el is fog tűnni. Sokkal egyszerűbben/kényelmesebben meg lehet oldani egy regexp-el és nem kell billentyűkódokkal szórakozni.
21

ez jó ötlet

Blackfriar · 2009. Szep. 17. (Cs), 10.51
Ez jó ötlet, kipróbálom.
22

félmegoldás

Blackfriar · 2009. Szep. 17. (Cs), 18.21
Sajna ez is csak félmegoldás. Hogyan azonosítom RegExp-nel a DEL billentyűt ?
Lassan kezdem úgy érezni proclubnak igaza van. :-)
24

nem értem

Drawain · 2009. Szep. 17. (Cs), 23.12
Akkor nem egészen értem mit akarsz. Nem billentyűleütést kell figyelni, hanem a beírt szöveget, így nyugodtan lehet használni a backspace-t, delete-et,akármit. Én valami ilyesmire gondoltam egy "input_mezo" id-jű input esetén:

JQuery:

$("#input_mezo").keyup(function() {
    var $this = $(this);
    $this.val($this.val().replace(/[^1-9-.]/gi,''));
});
Normál js:

document.getElementById('input_mezo').onkeyup = function() {
    this.value = this.value.replace(/[^1-9-.]/gi,'');
}
25

beégtem :-)

Blackfriar · 2009. Szep. 18. (P), 07.49
Huh Drawain, most beégtem. :-)
Ez egy igazán elegáns megoldás el kell ismernem.
Az egyetlen szépséghibája, hogy egy rövid ideig megjelennek a nem engedélyezett karakterek (nyilván, mert másképp nem lenne használható a reguláris kifejezés).
23

mit szóltok hozzá ?

Blackfriar · 2009. Szep. 17. (Cs), 20.49
Ezt izzadtam ki. Mit szóltok hozzá?
Az alábbi kód célja, hogy az input mezőbe számokon kívül csak a tizedespontot, minusz jelet, backspace-t és delete-et engedi beírni. Ez most 3 böngészővel működik.
<html>
<body>
<input type="text" style="width:80px" onkeypress="return check(event)" />
<script type="text/javascript">
function check(e) {
nav = navigator.appName;
p = new Array("48","49","50","51","52","53","54","55","56","57","8","45","46");
if (nav=="Netscape") {
f = e.charCode;
if (e.keyCode==8 || e.keyCode==46) {return true};
};

if (nav=="Microsoft Internet Explorer" || nav=="Opera") {f = e.keyCode};
for (n=0; n<p.length; n++) {if (f==p[n]) {return true}};
return false;
}
</script>
</body>
</html>
26

még fényeztem egy kicsit

Blackfriar · 2009. Szep. 18. (P), 11.35
Mintának betettem 4 input mezőt, ahol mindegyikre más beviteli szabály érvényes. Szerintetek baromság ez az egész?
<html>
<head>
<script type="text/javascript">
nav = navigator.appName;
function check(e, m) {
p = new Array("48","49","50","51","52","53","54","55","56","57","8");
h = p.length;
if (m==1) {p[h] = "45";p[h+1] = "46"};
if (m==2) {p[h] = "45"};
if (m==3) {p[h] = "46"};

if (nav=="Netscape") {
f = e.charCode;
if (e.keyCode==8 || e.keyCode==46) {return true};
};

if (nav=="Microsoft Internet Explorer" || nav=="Opera") {f = e.keyCode};
for (n=0; n<p.length; n++) {if (f==p[n]) {return true}};
return false;
}
</script>
</head>
<body>
<input type="text" style="width:80px" onkeypress="return check(event, 1)" />-47.1234<br />
<input type="text" style="width:80px" onkeypress="return check(event, 2)" />-47<br />
<input type="text" style="width:80px" onkeypress="return check(event, 3)" />47.1234<br />
<input type="text" style="width:80px" onkeypress="return check(event)" />47<br />
</body>
</html>