Tabbing with popup keyboard needs to select and deselect textboxes

Question

I have a series of text boxes on a page with a custom touch keyboard. The problem is when one clicks the tab on the custom keyboard and goes to the next text box, the text box's gradient does not remove (my class's removeClass('selected') does not function as usual). Even though the cursor moves on. I tried onfocus="myFunction()", css input:focus selector, and js .focus() / .focusout().

HTML

    <div class="container">
       <div class="control">
          <fieldset class="control-input input-name-noread gradient open-keyboard">
             <label>Name</label>
             <input type="text" class="from" id="preference-name" autocomplete="off" value="George">
          </fieldset>
       </div>
       <div class="control">
          <fieldset class="control-input input-name-noread gradient open-keyboard">
             <label>Name</label>
             <input type="text" class="from" id="preference-name" autocomplete="off" value="George">
          </fieldset>
       </div><div class="control">
          <fieldset class="control-input input-name-noread gradient open-keyboard">
             <label>Name</label>
             <input type="text" class="from" id="preference-name" autocomplete="off" value="George">
          </fieldset>
       </div></div>

JQuery

$(".keyboard-key-return").click(function() {
        $(".control-input").addClass('gradient');
    });

    $(".open-keyboard").click(function() {
        $(".keyboard").show();
    });

    $(".open-keyboard-readonly").click(function() {
        $(".keyboard").hide();
    });

    $(".keyboard-close").click(function() {
        $(".control-input").addClass('gradient');  
    });

    $(".control-input").click(function() {
        $(this).removeClass('gradient');
    });

    $(".keyboard-close").click(function(){
        $(".from").blur();
    })
    $(".keyboard-key-return").click(function(){
        $(".from").blur();
    })
    $(".control-input").focusout(function(){
        $(".from").css({
            "background-image": "-webkit-linear-gradient(top, rgb(239, 239, 239), rgb(220, 220, 220))"
        });
    });
    $(".control-input").focusout(function(){
        $(this).addClass('gradient');
    });

css

  .from {
      width: 443px;
      background-color: transparent;
      border: none;
      height: 68px;;
      outline: none;
      font-size: 28px;
      margin: 5px 0px 0px 0px;

      input:focus{
         background-image: none;
      }
  }

Is there an alternative to these methods to detect where the cursor is or a way to detect the focus event so I can remove the class on tab?

score 2 · Answer 1 · edited May 23 '17 at 11:43

This might be not the cleanest solution, but it is working as expected:

JQuery

$('.gradient').on('click', function(){
    $('.gradient').removeClass('selected');
    $(this).addClass('selected');
});

$('.gradient').on('keyup', function(e){
    $('.gradient').removeClass('selected');
    if (e.which == 9) { // is TAB key
        $(this).parent().find('.gradient').trigger('click'); // searching for the next element
    }
});

CSS

.gradient {
     background-image: -webkit-linear-gradient(top, rgb(239, 239, 239), rgb(220, 220, 220));
}
.gradient.selected {
    background-image: none;
}

Normally you need to prevent default for TAB key, see: jQuery: keyup for TAB-key?

`$(this).parent().find('.gradient').trigger('click');` this single line did it, didn't know you could force a click! Thanks — jShoop, Jul 03 '15 at 16:41

score 0 · Answer 2 · answered Jul 03 '15 at 16:37

Solution

$(".keyboard-key-tab").click(function() {
        $(".from").parent().find(document.activeElement).trigger('click');
    });

.keyboard-key-tab is the button on the keyboard. When the keyboard opens it's within it's on js class and is no longer able to detect .click() or .focus() on this page unless you force it. .from is the input class on the text box, the code returns to it's parent and searches for the active child (the next text box). The code then forces a click which is handled by the code I already had in place to remove/add classes (in this case gradients).

Tabbing with popup keyboard needs to select and deselect textboxes

2 Answers2