Блог

Главная - Вопросы по программированию - focus() и select() не сработали для сбора при нажатии клавиши, и это работает при фокусировке мыши

focus() и select() не сработали для сбора при нажатии клавиши, и это работает при фокусировке мыши

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Что я сделал: у меня есть несколько типов ввода, и я нажал клавишу вниз, чтобы сместить фокус на каждом входе, присвоив классу input_index_1 значение input_index_etc.

 $(document).on("keydown", ".inputbox", function(e) {
  if (e.keyCode == 40 || e.keyCode == 38) {
    var classNames = $(this).attr("class").split(" ");
    for (var contarray = 0, l = classNames.length; contarray < l; contarray  ) {
      var current_iterating_class = classNames[contarray];
      if (current_iterating_class.indexOf("input_index_") != -1) {
        var current_class = current_iterating_class;
      }
    }
    var pos = current_class.substr(current_class.indexOf("_")   7);
    pos = Number(pos);
    if (e.keyCode == 40) { //downarrow(forw)                        
      pos  = 1;
      console.log("pos 1="   pos);
      if (this.tagName == "SELECT") {
        e.preventDefault();
      }
      $(".input_index_"   pos).focus().select();
    }
    if (e.keyCode == 38) { //uparrow(prev)
      pos -= 1;
      if (this.tagName == "SELECT") {
        e.preventDefault();
      }
      $(".input_index_"   pos).focus().select();
    }
  }
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="control-label" for="sname">name</label>
<input type="text" id="sname" class="form-control inputbox input_index_1" name="sname" value="name">
<label class="control-label" for="work">work</label>
<input type="text" id="work" class="form-control inputbox input_index_2" name="work" value="work">
<label class="control-label" for="salary">salary</label>
<input type="text" id="salary" class="form-control inputbox input_index_3" name="sal" value="1234">

фокус работает правильно, но не сработал select().

Комментарии:

1. Не по теме: возможно, вас заинтересует developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes /… поскольку вы, похоже, заново изобретаете колесо

2. Есть причина, по которой вам не нравится использовать tab и shift-tab для переключения между элементами управления?

Ответ №1:

Функция jquery $().select() отличается от метода javascript node.select().

Ваш .focus().select() можно изменить на:

  $(".input_index_"   pos).focus();
 if ($(".input_index_"   pos).length) 
      setTimeout(() => $(".input_index_"   pos)[0].select(), 10)

пара замечаний, почему это не просто .focus()[0].select()

  • вы не проверяете, существует ли элемент, поэтому нажатие на первый элемент выдаст ошибку
  • действие .focus() DOM происходит после запуска вашего кода и сбрасывает выделение, поэтому вам нужно дать ему немного времени, чтобы справиться с этим. Есть другие способы, такие как перехват focus события, но это, возможно, ближе всего к вашему исходному коду

 $(document).on("keydown", ".inputbox", function(e) {
  if (e.keyCode == 40 || e.keyCode == 38) {
    var classNames = $(this).attr("class").split(" ");
    for (var contarray = 0, l = classNames.length; contarray < l; contarray  ) {
      var current_iterating_class = classNames[contarray];
      if (current_iterating_class.indexOf("input_index_") != -1) {
        var current_class = current_iterating_class;
      }
    }
    var pos = current_class.substr(current_class.indexOf("_")   7);
    pos = Number(pos);
    if (e.keyCode == 40) { //downarrow(forw)                        
      pos  = 1;
      console.log("pos 1="   pos);
      if (this.tagName == "SELECT") {
        e.preventDefault();
      }
      $(".input_index_"   pos).focus()
      if ($(".input_index_"   pos).length) 
          setTimeout(() => $(".input_index_"   pos)[0].select(), 10)
    }
    if (e.keyCode == 38) { //uparrow(prev)
      pos -= 1;
      if (this.tagName == "SELECT") {
        e.preventDefault();
      }
      $(".input_index_"   pos).focus();
      if ($(".input_index_"   pos).length) 
          setTimeout(() => $(".input_index_"   pos)[0].select(), 10)
    }
  }
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="control-label" for="sname">name</label>
<input type="text" id="sname" class="form-control inputbox input_index_1" name="sname" value="name">
<label class="control-label" for="work">work</label>
<input type="text" id="work" class="form-control inputbox input_index_2" name="work" value="work">
<label class="control-label" for="salary">salary</label>
<input type="text" id="salary" class="form-control inputbox input_index_3" name="sal" value="1234">