.onkeydown only take effect when focus one element

Question

I make the keyboard control for my slider. But I have a problem, it take effect even when I type in input search. How can I make it only take effect when I focus on slider?

My HTML:

<nav class="grey lighten-3 search"> // I don't want this element to be take effect by window.onkeydown
    <div class="nav-wrapper">
      <div class="searchbox">
        <form>
          <div class="input-field">
            <input id="search" type="search" required>
            <label for="search"><i class="material-icons">search</i></label>
          </div>
        </form>
      </div>
    </div>
</nav>

This my slider HTML:

<div class="row slider-container">
  <div class="col s12 category">
    <p>Slide</p>
  </div>
  <div id="slide" class="slider-content carousel col s12">
    <div class="item">
      <a href="#"><img class="lazyload" data-src="http://img02.deviantart.net/82fc/i/2013/175/2/7/aku_no_hana__poster_i__by_fikandzo-d6airxz.png" alt="Lazy Image">
      Caption</a>
    </div>
    <div class="item">
      <a href="#"><img class="lazyload" data-src="http://img02.deviantart.net/82fc/i/2013/175/2/7/aku_no_hana__poster_i__by_fikandzo-d6airxz.png" alt="Lazy Image">
      Caption</a>
    </div>
    <div class="item">
      <a href="#"><img class="lazyload" data-src="http://img02.deviantart.net/82fc/i/2013/175/2/7/aku_no_hana__poster_i__by_fikandzo-d6airxz.png" alt="Lazy Image">
      Caption</a>
    </div>
    <div class="item">
      <a href="#"><img class="lazyload" data-src="http://img02.deviantart.net/82fc/i/2013/175/2/7/aku_no_hana__poster_i__by_fikandzo-d6airxz.png" alt="Lazy Image">
      Caption</a>
    </div>
  </div>
</div>

My script:

    document.onkeydown = function() {
            switch (window.event.keyCode) {
            case 37:
            abb.trigger('abb.prev');
            break;
            case 39:
            abb.trigger('abb.next');
            break;
            case 65:
            abb.trigger('abb.prev');
            break;
            case 68:
            abb.trigger('abb.next');
            break;
            }
    };

You can make use of `e` as parameter to `function()` and get which is the `target` that triggered `e` using `e.target` or `e.target.nodeName` and if it is from slider then perform actions otherwise let it do what it is supposed to do!! — Guruprasad J Rao, Aug 27 '15 at 09:41
I don't really understand what you mean but thank you. I'll try — user3837245, Aug 27 '15 at 10:15

score 0 · Answer 1 · answered Aug 27 '15 at 11:02

0

You can define the onkeydown on the div only

var slider= document.getElementById('slide');
slider.onkeydown=function(){ ... }

answered Aug 27 '15 at 11:02

stubiklaus

151
8

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

First you may have to set your slider-container selectable thanks to this trick : <div class="row slider-container" tabindex="1">

Then just bind the event listener on your slider, so that it will be executed only when you focus the slider:

document.querySelector(".slider-container").onkeydown = function(event) {
            switch (event.keyCode) {
            case 37:
            abb.trigger('abb.prev');
            break;
            case 39:
            abb.trigger('abb.next');
            break;
            case 65:
            abb.trigger('abb.prev');
            break;
            case 68:
            abb.trigger('abb.next');
            break;
            }
    };

edited May 23 '17 at 12:22

Community

1
1

answered Aug 27 '15 at 11:05

Xartok

346
3
13

Thanks for your help.It work correctly but I still got same problem :D... I'll find another way.. – user3837245 Aug 27 '15 at 13:00
you mean that the function is executed even when the slider is not focused ? – Xartok Aug 27 '15 at 15:22
Actually it doesn't work correctly because I forgot that slider plugin create some div inside .slider-container (such as .drag or navigation bar) and I can't focus on .slider-container. All I want is this function isn't excuted when I type somewhere like input search. – user3837245 Aug 27 '15 at 15:55
Oh so just change the selector to #slide, it should be better :) – Xartok Aug 27 '15 at 16:42

.onkeydown only take effect when focus one element

2 Answers2