用于多个输入字段的虚拟键盘

Posted 2023-02-25

【中文标题】用于多个输入字段的虚拟键盘

【英文标题】：Virtual Keyboard for multiple input fields

【发布时间】：2020-10-14 09:39:07

【问题描述】：

我发现了这个名为“simple-keyboard”的虚拟键盘，它只适用于一个输入字段。来自键盘的输入仅插入到第一个文本字段中。

html

<input type="text" name="firstname" placeholder="Your name.." class="input">
<input type="text" name="lastname" placeholder="Your last name.." class="input">
<div class="simple-keyboard"></div>

简单的键盘 JS

let Keyboard = window.SimpleKeyboard.default;
let keyboard = new Keyboard(
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button)
);
// Update simple-keyboard when input is changed directly
document.querySelector(".input").addEventListener("input", event => 
  keyboard.setInput(event.target.value);
);
console.log(keyboard);
function onChange(input) 
  document.querySelector(".input").value = input;
  console.log("Input changed", input);

function onKeyPress(button) 
  console.log("Button pressed", button);
  // If you want to handle the shift and caps lock buttons
  if (button === "shift" || button === "lock") handleShift();

function handleShift() 
  let currentLayout = keyboard.options.layoutName;
  let shiftToggle = currentLayout === "default" ? "shift" : "default";
  keyboard.setOptions(
    layoutName: shiftToggle
  );

来源：https://hodgef.com/simple-keyboard/demos/

如何使它适用于所有带有class="input" 的输入字段？

【参考方案1】：

问题是因为querySelector() 只返回与选择器匹配的单个项目。如果存在多个，则只返回第一个。

要解决您的问题，您需要使用querySelectorAll()，它提供所有匹配元素的集合，然后您需要通过循环遍历该集合中的所有输入来初始化库。

document.querySelectorAll(".input").forEach(input => 
  input.addEventListener("input", event => 
    keyboard.setInput(event.target.value);
  );
)

每当我尝试输入时，它只会进入第一个文本字段...即使我在尝试键盘时选择了第二个输入字段...不工作

鉴于该评论，该库可能不支持每个实例的多个控件。相反，您可能需要为每个控件创建一个完整的 Keyboard 实例。这也需要在循环内完成：

document.querySelector(".input").addEventListener("input", event => 
  let keyboard = new Keyboard(
    onChange: input => onChange(input),
    onKeyPress: button => onKeyPress(button)
  );
  keyboard.setInput(event.target.value);
);

【讨论】：

试过你的代码......每当我尝试输入时，它只输入到第一个文本字段......即使我在尝试键盘时选择了第二个输入字段......不起作用： （

在这种情况下，您可能需要为每个输入创建 Keyboard 对象的整个实例。

我在这里找到了一个文档...只是想理解它..您也可以看看吗？ hodgef.com/simple-keyboard/editor/?d=hodgef/…

嘿@RedStarEntertainment，抱歉耽搁了，我刚刚在谷歌上找到了这个问题。这是支持多个输入的文档hodgef.com/simple-keyboard/questions-answers/… - 如果您遇到任何问题，请随时在 github 存储库中报告，我会立即回复。谢谢！