使用弹出式键盘进行制表需要选择和取消选择文本框

Tabbing with popup keyboard needs to select and deselect textboxes

本文关键字：选择 取消 文本 弹出式 键盘      更新时间：2023-09-26

我在一个带有自定义触摸键盘的页面上有一系列文本框。问题是，当单击自定义键盘上的选项卡并转到下一个文本框时，文本框的渐变不会删除(我的类的removeClass("selected"(不能正常工作(。即使光标继续移动。我尝试了onfocus="myFunction()"、css input:focus选择器和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;
      }
  }

除了这些方法之外，有没有其他方法可以检测光标的位置，或者有没有一种方法可以检测焦点事件，这样我就可以删除选项卡上的类？

这可能不是最干净的解决方案，但它正在按预期工作：

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;
}

通常需要防止TAB键的默认值，请参见：jQuery：为TAB键设置键？

解决方案

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

.keyboard-key-tab是键盘上的按钮。当键盘打开时，它在js类中，除非强制，否则无法再检测到此页面上的.click()或.focus()。.from是文本框上的输入类，代码返回到它的父级并搜索活动的子级(下一个文本框(。然后，代码强制单击，这由我已经准备好的代码来处理，以删除/添加类(在本例中为渐变(。

相关文章：