oninput事件为jquery屏幕键盘 [英] oninput event for jquery onscreen keyboard

问题描述

我有一个textarea，我希望发生一些事情，每当用户键入某个东西时，现在我有以下两行代码：

< > < textarea oninput =alert（''）id =writerows =6cols =60>< / textarea>

和

< textarea onkeyup =alert（''）id = writerows =6cols =60>< / textarea>

然而，这只适用于真实键盘。当我使用虚拟屏幕键盘时，警报永远不会被触发。

我创建了一个 jsfiddle ，并且这个是javascript：

  $（function（）{
 var $ write = $（'＃write'）， 
 shift = false，
 capslock = false; 
 
 $（'＃keyboard li'）。click（function（）{
 var $ this = $（this ），
 character = $ this.html（）; //如果是小写字母，则此变量不发生任何变化
 
 // Shift键
 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; 
} 
 
 //删除
 if（$ this.hasClass（'delete'））{
 var html = $ write.html（）; 
 
 $ write.html（html.substr（0，html.length  -  1））; 
返回false; 
 
 $ b $ //特殊字符
 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 =\\\
; 
 
 //大写字母
 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）; 
}）; 
}）; 
  

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

解决方案您可以在更改<$>时手动触发输入 c $ c> textarea 的内部html与类似的东西。

  $（'textarea' ）.trigger（ '输入'）; 
  

以下是更新的JSFiddle链接： https://jsfiddle.net/tpztp48r/4/

I have a textarea and I want something to happend, every time when the user types in something, now for that I have the following two lines of code which work:

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

and

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

However, this only works with a real keyboard. When I use a virtual onscreen keyboard, the alert never gets triggered.

I have created a jsfiddle and this is the 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);
    });
});

How do I change it so the onscreen keyboard will have the same effect as a regular one?

解决方案

You can trigger the input event manually when changing the textarea's inner html with something like this.

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

Here is the updated JSFiddle link: https://jsfiddle.net/tpztp48r/4/

这篇关于oninput事件为jquery屏幕键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！