# Virtual keyboard in any text fields

**URL:** <https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712>\
**Category:** General\
**Created:** [12 December 2018 14:09 UTC](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712 "2018-12-12T14:09:45Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [17 December 2018 15:33 UTC](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712/23 "2018-12-17T15:33:55Z")

</div>

You have to change:

```auto
 if (event.target == modal_keyboard)

```

to:

```auto
 if (event.target == modal_keyboard_archive)

```

Also look at my latest code ( [https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51](https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51) ), you'll need to add: input.change() after a key and backspace event

```auto
        type: function (key) {
            var input = this.settings.input,
                val = input.val(),
                input_node = input.get(0),
                start = input_node.selectionStart,
                end = input_node.selectionEnd;

            var max_length = $(input).attr("maxlength");
            if (start == end && end == val.length) {
                if (!max_length || val.length < max_length) {
                    input.val(val + key);
                    input.change()
                }
            } else {
                var new_string = this.insertToString(start, end, val, key);
                input.val(new_string);
                start++;
                end = start;
                input_node.setSelectionRange(start, end);
            }

            input.trigger('focus');

            if (shift && !capslock) {
                this.toggleShiftOff();
            }
        },

        backspace: function () {
            var input = this.settings.input,
                val = input.val();

            input.val(val.substr(0, val.length - 1));
            input.change()
        },
```

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [17 December 2018 15:44 UTC](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712/24 "2018-12-17T15:44:17Z")

</div>

> [@hugobox](#):
>
> event.target

you are absolutely right. Thanks for help.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [18 December 2018 09:34 UTC](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712/25 "2018-12-18T09:34:04Z")

</div>

Del button always return to the first lineand doesn't delete the letter where the trigger exists.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [18 December 2018 09:48 UTC](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712/26 "2018-12-18T09:48:56Z")

</div>

> backspace: function () {  
> var input = this.settings.input,  
> val = input.val();
> 
> ```
> input.val(val.substr(0, val.length - 1));
> input.change();
> input.trigger('focus');
> 
> },
> 
> ```

i i add input.trigger('focus'); to avoide returning to the first line when deleting.  
how about when the trigger exist in the middle ?

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [18 December 2018 15:59 UTC](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712/27 "2018-12-18T15:59:27Z")

</div>

Good catch! I'll look into it!

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [18 December 2018 16:24 UTC](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712/28 "2018-12-18T16:24:03Z")

</div>

Here's the new backspace function:

```auto
backspace: function () {
            var input = this.settings.input,
                val = input.val();
                input_node = input.get(0),
                start = input_node.selectionStart,
                end = input_node.selectionEnd;
            
            input.val(val.slice(0, start-1) + val.slice(start))
            input.change()
            input.focus()
            input_node.setSelectionRange(start-1, start-1);
        }

```

[Previous page](https://discourse.nodered.org/t/virtual-keyboard-in-any-text-fields/5712.md?page=1)