Есть ли способ использовать JavaScript для имитации нажатия определенной клавиши при нажатии другой клавиши? - PullRequest
Новая
       128

Есть ли способ использовать JavaScript для имитации нажатия определенной клавиши при нажатии другой клавиши?

0 голосов
/ 09 июля 2020

Подобно нажатию клавиши «a» и вводу «b». Кажется, есть много старых вопросов, похожих на этот, но ответы, похоже, не работают. Не знаю, из-за того, что KeyboardEvent.initKeyEvent() устарел или в моем коде есть fl aws, но я не могу понять это правильно.

Вот пример некоторых вещей, которые я пробовал: 

document.addEventListener("keydown", evt => {
  evt.target.dispatchEvent(new KeyboardEvent('keydown', {"keyCode": 9, "which": 9}))
})

1 Ответ

1 голос
/ 09 июля 2020

Новый ответ: 

const data = [
  "apple",
  "banana",
  "pear",
  "orange",
  "lemon",
  "lime",
  "grape",
  "cherry",
  "peach",
  "plum",
  "grapefruit",
  "watermelon",
  "kiwi"
]

let suggestions = [];
const container = document.getElementById("data");
let index = 0;

function handleChange(e) {
  const value = e.target.value;
  container.innerHTML = "";
  index = 0 ;
  suggestions = value ? data.filter(ele => ele.toLowerCase().includes(value)) : [];
 
  suggestions.forEach(ele => {
    const suggestion = document.createElement("div");
    suggestion.textContent = ele;
    container.append(suggestion);
  })
}



function handleKeydown(e) {
  if (e.keyCode === 9 && suggestions.length) {
    e.preventDefault();
    e.target.value = suggestions[index];
    index === suggestions.length - 1 ? index = 0 : index += 1;
  } else if (e.keyCode === 13) {
    container.innerHTML = ""
    index = 0;
    suggestions = [];
  }

}
<div> Type A Fruit </div>
<input type="text" onkeydown="handleKeydown(event)" oninput="handleChange(event)" />
<div id="data"> </div>

Старый ответ:

Похоже, не существует способа искусственно открыть раскрывающийся список выбора; это была лучшая реализация, которую я мог придумать. 

let selected = false;

function handleSelect(e) {
  if (e.keyCode === 9 && !selected) {
    e.preventDefault()
    const options = Array.from(e.target.children);
    if (!e.target.classList.contains('open')) {
      e.target.setAttribute('size', e.target.options.length)
      e.target.classList.toggle('open')
    } else {
      const index = options.findIndex(option => !!option.selected)
      if (options[index + 1]) {
        options[index + 1].selected = true;
      } else {
        options[0].selected = true;
      }
    }
  }
  if (e.keyCode === 13) {
    e.preventDefault();

    if (e.target.classList.contains('open')) {
      e.target.classList.toggle('open')
      e.target.setAttribute('size', "initial")
      selected = true;
    }

  }

 if (e.keyCode === 38 || e.keyCode === 40) {
   if (!e.target.classList.contains('open')) e.preventDefault();
 }
}

function handleBlur() {
  selected = false;
}

function handleClick(e) {
  Array.from(e.target.children)[1].focus();
}
.container {
  display: flex;
}

label {
  width: 100px;
  pointer-events: none;
}

select {
  pointer-events: none;
}

.open {
  position: absolute;
  left: 110px;
}
<div> click and hit tab </div>

<div class="container" onclick="handleClick(event)">
  <label for="cars">Choose a car:</label>

  <select onkeydown="handleSelect(event)" onclick="handleClick(event)" onblur="handleBlur()" name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>
...