Keskustelu: Nettisivujen teko: JavaScript: Näppäinyhdistelmän ctrl+enter havaitseminen

Miten JavaScriptilla voi havaita Ctrl- ja enter -näppäinten painamisen yhtäaikaa? Tarkoitus on siis luoda pikanäppäin eräälle sivun toiminnolle.

Googlaamalla löytyi runsaasti jQuery-esimerkkejä, mutta sama pitäisi tehdä pelkällä JavaScriptilla. Yhden näppäimen painamisen osaan kyllä JavaScriptilla havaita:

// enter: 13 (ctrl: 17)

window.onkeypress = function(e) {
  if (e.keyCode == 13) console.log('Enter-näppäimen painallus havaittu');
};

No miksei se jQuery-esimerkki kelpaa?

Lebe80 kirjoitti:

No miksei se jQuery-esimerkki kelpaa?

Haluasin saada tämän tehtyä ilman jQueryä.

Tutki e.ctrlKey arvoja.

Itse asisassa voisin tehdäkin tuon jQueryllä, mutta ennen sitä seuraavanlainen ongelma olisi ratkaistava:

Chromen kehitystyökalujen konsolissa näkyy seuraavanlainen virhe:

Failed to load resource: the server responded with a status of 404 (Not Found)

Virhe liittyy tiedostoon ”jquery-1.10.2.min.map”, jota ei ole. Sama virhe toistuu aina, kun Chromen kehitystyökalut avaa. Tarvitseeko jQueryä käytettäessä ottaa käyttöön myös edellä mainittu tiedosto vai mistä on kyse?

Lisäys:

Virhe poistuu, kun kehitystyökalujen asetuksista ottaa valinnan ”Enable source maps” pois käytöstä. Tietäätkö kukaan, onko kyseinen valinta oletuksena käytössä ja haittaako kysinen virhe mitenkään?

Se ei haittaa mitään. Tuo map vaan kertoo muuttujien oikeat nimet minimoidulle JavaScript-tiedostolle, jolloin virheiden debuggaus on helpompaa.

Hyvä kysymys. Ei ole ihan helppoa. Kuten DOM 3 Events sanoo, tähän on perinteisesti käytetty keyCode- je keyChar-ominaisuuksia, mutta ne toimivat eri tavoilla eri ympäristöissä. Valitettavasti kyseinen dokumentti ei oikein tarjoa rakentavaa vaihtoehtoa. Ja sitten on vielä Event-olioiden erilainen käsittely eri selaimissa, Mutta seuraava näyttäisi toimivan (testattu Firefox, Chrome, IE 10, myös IE 5 -tilassa):

<input id=i>
<script>
document.getElementById('i').onkeypress = function (e) {
  var tapahtuma = e || window.event;
  if(tapahtuma.ctrlKey && (tapahtuma.charCode === 10 ||
                           tapahtuma.charCode === 13 ||
                           tapahtuma.keyCode === 10 ||
                           tapahtuma.keyCode === 13))
    {alert('Ctrl Enter havaittu')}
}
</script>

Tämä ei vain näytä toimivan, vaan tietää miksi toimii:

var keyup = function keyup(e) {
    // tarkista onko enter-painike ja ctrl kyseessä
    if(e.keyCode === 13 && e.ctrlKey) {
      // kerro että on
      document.querySelector('body').innerHTML += '<p>Ctrl + Enter</p>';
    }
  };

if(document.addEventListener) {
  document.addEventListener('keyup', keyup);
} else if(document.attachEvent) {
  // käytännössä IE8
  document.attachEvent('onkeyup', function(e) {
    keyup(e || window.event);
  });
}

onkeypress menee IE:ssä Windowsin oman näppäimistökäsittelijän lävitse, josta syötetään vähän väärä arvo suoraan lävitse selaimeen (eli charCode eikä keyCode kuten pitäisi). Näinpä turvallisempaa on käyttää keydown- ja keyup-eventtejä, koska ne palauttavat IE:ssäkin samaa kuin mitä toiset selaimet.

Ja tällä tavoin päästään sitten lopulta siihen, että tarvitsee tarkistaa vain kaksi asiaa, juuri niinkuin pitäisikin. Yllä oleva toimii kaikessa IE8+. Varmaan vanhemmissakin jos jaksaa vaihtaa querySelector('body') tilalle getElementsByTagName('body')[0], mutta niin vanhoista välittäminen alkaa mennä säälittävyyden puolelle.

Tämä näyttäisi toimivan ainakin IE:n versiossa 9 ja uudemmissa sekä Chromen, Firefoxin ja Operan uusimmissa versioissa.

function ctrlPlusEnter(e) {
	if (e.keyCode == 13) {
		if (e.ctrlKey) {
			alert('Toimii!');
		}
	}
}
window.onkeydown = ctrlPlusEnter;

Onko tuohon luottamista, sillä koodi tuntuu ”liiankin yksinkertaiselta” toimiakseen oikein vaadituilla selaimilla?

Riittää siis, kun koodi toimii oikein IE:n versiolla 9 ja uudemmilla sekä muiden selainten uudehkoilla versioilla.

Se riittää IE9+. Tosin käytä === eikä ==, koska vertailet numeroa numeroon. Muutenkin kannattaa usein suosia ===, koska se vähentää mm. bugien riskiä.

== vertailee kahta muuttujaa toisiinsa ja tarvittaessa pakottaa toisen vertaillun muuttujan yhteensopivaksi toisen muuttujan kanssa, jotta muuttujien arvoja voidaan vertailla.

=== vertailee ensin kahden muuttujan tyyppiä ja vasta sitten niiden arvoa, mikäli tyyppi on sama. Huomattavasti nopeampaa sen lisäksi, että vähentää vaikeasti havaittavien bugien riskiä.

Kiitoksia! Hyvä lopputulos: Yksinkertaiseen toimintoon yksinkertainen ja lyhyt koodi:

window.onkeydown = function(e) {
	if (e.keyCode === 13 && e.ctrlKey) {
		alert('Toimii!');
	}
}

Lebe80 kirjoitti:

No miksei se jQuery-esimerkki kelpaa?

näin yksinkertaisen toteutuksen takia tuskin kannattaa ladata kokonaista kirjastoa?

nixu89 kirjoitti:

Lebe80 kirjoitti:

No miksei se jQuery-esimerkki kelpaa?

näin yksinkertaisen toteutuksen takia tuskin kannattaa ladata kokonaista kirjastoa?

Näin yksinkertainen toteutus taisi ratketa jo viikko sitten.