【问题标题】:oninput event for jquery onscreen keyboardjquery 屏幕键盘的 oninput 事件
【发布时间】:2016-02-24 01:15:09
【问题描述】:

我有一个文本区域,我希望每次用户输入某些内容时都会发生一些事情,现在我有以下两行代码可以工作:

<textarea oninput="alert('')" id="write" rows="6" cols="60"></textarea>

<textarea onkeyup="alert('')" id="write" rows="6" cols="60"></textarea>

但是,这只适用于真正的键盘。当我使用虚拟屏幕键盘时,警报永远不会被触发。

我创建了一个jsfiddle,这是 javascript:

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

    $('#keyboard li').click(function(){
        var $this = $(this),
            character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

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

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

        // Caps lock
        if ($this.hasClass('capslock')) {
            $('.letter').toggleClass('uppercase');
            capslock = true;
            return false;
        }

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

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

        // Special characters
        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";

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

        // Remove shift once a key is clicked.
        if (shift === true) {
            $('.symbol span').toggle();
            if (capslock === false) $('.letter').toggleClass('uppercase');

            shift = false;
        }

        // Add the character
        $write.html($write.html() + character);
    });
});

如何更改它以使屏幕键盘具有与普通键盘相同的效果?

【问题讨论】:

    标签: javascript jquery html on-screen-keyboard


    【解决方案1】:

    您可以在使用类似这样的方式更改textarea 的内部html 时手动触发input 事件。

    $('textarea').trigger('input');
    

    这里是更新的 JSFiddle 链接:https://jsfiddle.net/tpztp48r/4/

    【讨论】:

    • 您可能还想在删除最后一个字符$write.html(html.substr(0, html.length - 1)); 的其他位置触发它。如果它是您正在寻找的东西,您能否接受它作为答案。 :)
    • 检查更新的小提琴,我在其中添加了一个函数,该函数将更新 HTML 并触发输入事件。 jsfiddle.net/tpztp48r/6 :)
    猜你喜欢
    • 2014-06-07
    • 2016-01-26
    • 2013-07-03
    • 2015-06-23
    • 1970-01-01
    • 2016-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多