CODEWITHSUNDEEP
javascriptjqueryhtmlon-screen-keyboard
Tom
Tom

Reputation: 2661

oninput event for jquery onscreen keyboard

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?

Upvotes: 2

Views: 1077

Answers (2)

Thomas Williams
Thomas Williams

Reputation: 1029

As I wrote in this (possibly duplicate) question

The inputType event property is used to determine the kind of change that was performed, since the input event is triggered after the change has taken place.

Notice, it is not allowed to set the inputType as an event detail on a system event, but this work-around seems to work in my own tests.

    const inpType = "insertText";

    const evt = new Event('input', { bubbles: true, cancelable: true })
    evt.inputType = inpType;
    inputField.dispatchEvent(evt);

Please read this documentation (and try the sample within) on Mozilla.org

Here are the behaviors triggering the various inputType enums: w3c.org

Upvotes: 0

Kishor
Kishor

Reputation: 2677

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/

Upvotes: 2

Related Questions