JavaScript billentyű események
Üdv mindenkinek !
Először írok itt a weblabor oldalán, és ezért még nem igen vágom hogy mi hol van, meg hogy jó helyen vagyok-e egyáltalán, szóval ha rossz helyre írok esetleg vagy nem megfelelően akkor előre is elnézést kérek :-)
Tehát elhatároztam hogy csinálni szeretnék egy "mesterséges" textarea elemet, mégpedig egy szimpla div elem segítségével. Arra gondoltam hogy ha ez a div elem aktív, akkor figyelem a billentyű eseményeket és megjelenítem benne ami kell. Namost ugye vannak speciális karakterek amikhez módosítóbillentyűk kellenek mint például az Alt, vagy a Shift. Tudom hogy ezt is lehet figyelni, de nekem sehogy se akar összejönni sajnos :-( Őszintén szólva nagyon örülnék egy komplett példának, ha valaki esetleg szánna rá egy kis időt. A feladat tehát csak annyi lenne hogy egy div elemhez fűzzük hozzá mindig a leütött billentyűt(ez még megy), de kezelje a módosító billentyűket is(ez már nem megy), továbbá működjön nagyjából minden böngészőben (Firefox és Explorer legújabb verziói elegendőek).
A segítséget előre is köszönöm szépem.
■ Először írok itt a weblabor oldalán, és ezért még nem igen vágom hogy mi hol van, meg hogy jó helyen vagyok-e egyáltalán, szóval ha rossz helyre írok esetleg vagy nem megfelelően akkor előre is elnézést kérek :-)
Tehát elhatároztam hogy csinálni szeretnék egy "mesterséges" textarea elemet, mégpedig egy szimpla div elem segítségével. Arra gondoltam hogy ha ez a div elem aktív, akkor figyelem a billentyű eseményeket és megjelenítem benne ami kell. Namost ugye vannak speciális karakterek amikhez módosítóbillentyűk kellenek mint például az Alt, vagy a Shift. Tudom hogy ezt is lehet figyelni, de nekem sehogy se akar összejönni sajnos :-( Őszintén szólva nagyon örülnék egy komplett példának, ha valaki esetleg szánna rá egy kis időt. A feladat tehát csak annyi lenne hogy egy div elemhez fűzzük hozzá mindig a leütött billentyűt(ez még megy), de kezelje a módosító billentyűket is(ez már nem megy), továbbá működjön nagyjából minden böngészőben (Firefox és Explorer legújabb verziói elegendőek).
A segítséget előre is köszönöm szépem.
javascript keretrendszer
Egy hivatkozás kapaszkodónak: http://docs.jquery.com/Events/keydown#fn
Módosító billentyűk
Ctrl+Enteresetében tudhatod, hogy le volt nyomva aCtrlgomb is, de azt nem fogod tudni figyelni hogy aCtrlgombot lenyomták-e. Ugyanez érvényes aShiftés azAltgombokra is.Valamint azt se fogod tudni JavaScripttel elkapni, hogy a kettő közül melyik
Ctrl,ShiftvagyAltgomb volt lenyomva a "normál" gomb lenyomásakor, csak azt hogy le volt nyomva.Mindenesetre álljon itt egy részlet a jQuery-t használó HTMLBox Drupal modulból:
Óhhh...Mindent lehet figyelni...
Igaz
Shiftkódja 16, aCtrlkódja 17 és azAlté 18.És mire kell ez neked? Mert
Igen
Igen, amúgy tudom hogy vannak már megoldások. Szinte mindenre van. De én sose copyzok. Sőt még ötletet se "lopok" csak ha nagyon szakad a kötél :-) Általában mindent magamtól találok ki. Elkezdem valahonnan, és fejlesztem tovább, amíg teljesen profi nem lesz, vagy a lehető legjobb (mármint lehető legjobb megoldás). De azért csinálom mert élvezem hogy meg kell oldani egy problémát, és nem szeretek már meglévő kódokat használni :-)
Nah működik...
return false?
Gábor
Ööö....
Őszintén szólva nem tudom hogy mit csinálnak a fent írt kódjaid nevezetesen :
biztos igazad van
Ez a cikk hátha segít:
preventing event default behavior
bár ez elég régi böngészőkről szól, és biztos a mozilla developer center oldalán is találsz hasonlót :-)
Üdv:
Gábor.
Keresés
Hát igen...
Még egy kis probléma
Továbbá még egy idegesítő probléma. Ha nagyobb kommentet írok, ami már nem fér bele a szövegmezőbe, akkor ugye gördül. Ha mondjuk a végén vagyok, tehát legörgettem teljesen, és valamit beszúrok a szövegmezőbe - mondjuk egy szmájlit - akkor a beszúrás után visszaugrik a szövegmező legelejére. Ezt is ki szeretném küszöbölni valahogy.
A segítséget előre is köszönöm.
Kurzor
blur), akkor mentsd el a kurzor pozícióját, és fókusz esetén pedig visszarakod a kurzort oda, ahol volt. Pont mint a hozzászólás szerkesztőben itt.Értem..ezt nem tudtam
Új megközelítés.
Noh, az én tervem az csak pár soros, és szinte majdnem hibamentes, még a gyors gombokkal sem kell foglalkozni, és az eredmény is ugyan az, csak ugyebár az esetek 90%-ban az ember a bonyolult és rossz úton indul el.
Nah íme az egyszerű terv:
<style>
#text{
moz-opacity:0.2;
webkit-opacity:0.2;
opacity:0.2;}
#tartalom {position:absolute;}
</style>
<script>
function beir() {
document.getElementById('tartalom').innerHTML=document.getElementById('text').innerHTML;
}
</script>
<body>
<div id="tartalom"></div>
<div><textarea id="text" rows="4" cols="20" onkeypress="beir()"></textarea></div>
</body>
</html>
Nah mint említettem MAJDNEM hibamentes. A hiba az hogy a textarea-t valamiért nem olvassa ki, kivéve ha már alapból írok valamit a textarea tag-ek közé.
Viszont "input type=text"-el megvalósítható, csak a sortörés fog kimaradni az esetben.
Várnám a pontos megoldást a textarea kiolvasására.
Előre is köszi, és remélem én is segíthettem valamit, legalább a jó irányba való elinduláshoz. :D
Value
Tanácsok
(Ez is a 16-osra válasz.)
Uhh, elhamarkodtam az előzőt.
Egyébként durván gyorsan reagáltatok az írásomra, eleve nem gondoltam volna hogy választ kapok rá, azt főképp nem, hogy ilyen hamar.
Jah, és szoktam használni doctypet, prefixet meg hasonlókat, csak gondoltam, az most ide felesleges, mert nem az a lényeg, és felesleges sorokkal nem akartam terhelni a kommentemet, hogy jobban átláthatóbb legyen a irkálmányom. :D
<style>
#text{
moz-opacity:0.0;
webkit-opacity:0.0;
opacity:0.0;}
#tartalom {
position:absolute;
border: black 2px solid;
width:340px;
height:100px;}
</style>
<script>
function beir(form) {
alma=parseInt(Math.random()*1000000);
document.getElementById('tartalom').innerHTML="<font color='#" + alma + "'>" + form.text.value + "</font>";
}
</script>
<body>
<div id="tartalom"></div>
<form>
<div>
<textarea id="text" name="text" cols="40" rows="5" onkeypress="beir(this.form)"></textarea >
</div>
</form>
</body>
</html>
Nah, én ezzel oldottam meg. Bár a value-s megoldás valószínűleg jobb.
Köszi a segítséget azért.
Ékezetes betűk
Illik ide a kérdés, ezért nem nyitottam új témát.
Egy form-átalakító pluginhez írtam egy kiegészítőt, ami azt csinálja, hogy ha lenyomsz egy betűt, akkor az eredeti selecthez hasonlóan a listában odagördül a megfelelő elemhez, és beteszi ezt az elemet a legördülősávba is.
Egy probléma van, annak idején ezt egy olyan oldalhoz csináltam, ahol csak számokat kellett beírni, a mostanihoz viszont betűket. Az ékezetes betűket viszont nem veszi be, és ahogy megnéztem, az összes ékezetes betű karakterkódja 0.
Van rá más mód, hogy kiderüljön, melyik ékezetes betű lett lenyomva?
Előre is köszi!
keypress
keypressesemény visszaadja a megfelelő karaktert.A keypress-nél az
Viszont azóta megoldottam.
Keydown-ra létrehoztam egy inputot és rátettem a focust, keyup-ra meg kiolvastam a tartalmát és visszatettem a selectre a focust. :)
keypress-re kipróbálhatsz egy
Próbáld ki mert nem teszteltem.
1 órát böngésztem, mikor meg