如何使用虚拟键盘写入焦点输入？

Posted 2023-03-17

【中文标题】如何使用虚拟键盘写入焦点输入？

【英文标题】：How do I write into a focused input with a virtual keyboard?

【发布时间】：2018-07-15 11:49:31

【问题描述】：

我完成了一个教程，为我不希望使用 chrome o/s 键盘的应用程序创建虚拟键盘。该教程很棒，jquery 比我预期的要简单得多。但是，它只是使用 id 作为选择器写入文本输入。我想让它直接输入一个重点输入。我一直无法找到实现这一目标的方法。有人可以帮忙吗？

这是脚本：

 $(function()
var $write = $('#write'),
    shift = false,
    capslock = false;

$('#keyboard li').click(function()
    var $this = $(this),
        character = $this.html();


    if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) 
        $('.letter').toggleClass('uppercase');
        $('.symbol span').toggle();

        shift = (shift === true) ? false : true;
        capslock = false;
        return false;
    

            if ($this.hasClass('capslock')) 
        $('.letter').toggleClass('uppercase');
        capslock = true;
        return false;
    

    if ($this.hasClass('delete')) 
        var html = $write.html();

        $write.html(html.substr(0, html.length - 1));
        return false;
    


    if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
    if ($this.hasClass('space')) character = ' ';
    if ($this.hasClass('tab')) character = "\t";
    if ($this.hasClass('return')) character = "\n";


    if ($this.hasClass('uppercase')) character = character.toUpperCase();


    if (shift === true) 
        $('.symbol span').toggle();
        if (capslock === false) $('.letter').toggleClass('uppercase');

        shift = false;
    

    $write.html($write.html() + character);
);
);

我希望用户能够使用此键盘编辑许多输入，以下是这些输入的 html 标记：

    <input id="productC"  maxlength="3" class="menu" value="$8">
    <input id="priceCA" maxlength="3" class="menu" value="$10">
    <input id="priceCB" maxlength="3" class="menu" value="$8">
    <input id="priceCC" maxlength="3" class="menu" value="$12">

作为说明，我尝试将 $write 变量切换到菜单类。没用。

【参考方案1】：

替换

$write.html($write.html() + character);

与

$(':focus').html($(':focus').html() + character);

$(':focus') jQuery 选择器将返回当前焦点元素。您还应该检查焦点元素是否是输入。

【讨论】：

这看起来应该可以工作......但是，一旦我开始在键盘上输入，初始输入的焦点就会丢失并且它不起作用。我会试着弄清楚，如果可以的话，我会接受这个作为答案。

我尝试了一些方法，但键盘仍然无法工作。一旦单击键盘按钮，似乎 :focus 就会丢失。我尝试将输入标签更改为文本区域。我在 jquery 中尝试了类和焦点选择器的组合。我将键盘容器设为输入的父级。