sdeering / onscreenkeyboard

On-screen keyboard powered by jQuery.

jQuery On-screen keyboard

This is a simple on-screen keyboard powered by JavaScript/jQuery.

Demo: https://www.sitepoint.com/jquery-on-screen-keyboard/

Article: http://www.sitepoint.com/jquery-on-screen-keyboard/

jQuery Mobile Screen Keyboard

This version has been modified for jQuery Mobile and has other features here: https://github.com/grburgos/mobilescreenkeyboard

Credits to: @grburgos

The MIT License (MIT)

Copyright © 2015 Sam Deering, http://samdeering.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

onscreenkeyboard's Issues

demo website is down

Demo links on github and other pages don't work.

Handling of Input File type

I have noticed that Chrome generates the following error if the page contains an input type of "file".

Uncaught InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('file') does not support selection.

I think a simple fix for this is to change the following line:

$(':input').not('[type="reset"]').not('[type="submit"]').on('focus, click', function (e) {

to

$(':input').not('[type="reset"]').not('[type="submit"]').not('[type="file"]').on('focus, click', function (e) {

Mark.

onscreenkeyboard is very slow

hi,

I m using this and it is very slow while typing character wait for 2 sec or more in mobile Android Device ..

Thanks.

Where is the pointer

1. Is there anyway to make the cursor (pointer, the blinking '|') appear because every time I am typing using the OS-keyboard, I lost focus of current textbox (input).
2. Normally when you use physical keyboard you have some functions like onkeydown, onkeyup or onchage... that indicates there are changes in the input, how to know if I typed something in the input using OS-keyboard, for example: I am trying to implement this: auto move to next input if reached max-length of current input, how do I do this? (and seems like the maxlength attribute doesn't work when using OS-keyboard)

Not Working when dynamic input elements added to screen

Ran into an issue where the keyboard would not work when dynamically added new input elements to the screen.

cursor position can go into negative

When all text has been deleted the cursor should stop at position 0, but it allows it to go into negative numbers.

to fix this i edited jsKeyboard.js

added below line 26

jsKeyboard.setcurrentElementCursorPosition = $(this).setCursorPosition(0);

amended the del: function() to force the cursor position back to 0 if it goes to anything less than.

del: function() {
var a = jsKeyboard.currentElement.val(),
pos = jsKeyboard.currentElementCursorPosition,
output = [a.slice(0, pos-1), a.slice(pos)].join('');
jsKeyboard.currentElement.val(output);
//below if statement added to reset cursor position
if (pos <= 0) {
pos = "0";
//set cursor position set at top of this script if it goes below 0 the set it back to 0
jsKeyboard.setcurrentElementCursorPosition;
jsKeyboard.updateCursor();
} else {
jsKeyboard.currentElementCursorPosition--; //-1 cursor
jsKeyboard.updateCursor();
}},

cursor position always gets reset to 0 now when it goes to negative numbers.
Hope this helps
Thanks

Symbol Button Is not Accurate

The symbol button in the lower right corner has the following characters on it "#$+".

However the dollar sign is not actually under this subset of buttons, it is with the numbers.
Suggestion: change the button to display "#%+".

Thanks,
Mat

What is the license?

Control the size of the keyboard

I was wondering is there a simple way to specify the total size of the keyboard? Kind of a zoom? I'm trying to use the keyboard on a mobile device and it works the problem is that the keyboard is too big. I played with the width and height css but ended up deforming it.

Replace highlighted selection

If you highlight characters in the input field and then press a keyboard key, the selection should be replaced by the key character. Instead, I'm seeing it either insert the character at the beginning or end of the selection, and can't predict which it will be.

'delete' empty input field reverses write order

In the demo, if you press 'delete' while the cursor is in an empty input field, the next time to you start typing, characters are added to the front of the input, rather than the end.

Revert to lowercase characters automatically

I would like the keyboard to revert to lowercase characters by default after an uppercase character is typed. I have tried adding jsKeyboard.changeToSmallLetter() at the end of the write function, however; this does not appear to do anything. Any help would be much appreciated. Thanks!

Issue with IE11

`jQuery.fn.getSelectionStart = function(){
    if(this.length == 0) return -1;
    input = this[0];

    var pos = input.value.length;

    if (input.createTextRange) {
var r = document.selection.createRange();
r.moveEnd('character', input.value.length);
        if (r.text == '')
        pos = input.value.length;
        pos = input.value.lastIndexOf(r.text);
    } else if(typeof(input.selectionStart)!="undefined")
    pos = input.selectionStart;

    return pos;
}`

document.selection.createRange() is no longer supported in IE11. Any suggestions, workaround?

Return line always added to end of input

When pressing the Enter key the return line is always added to the end of the input rather than the current cursor location.

To replicate:

• Focus on a text area
• Enter a couple of characters (abc)
• Press Enter
• Enter a couple more characters (xyz)

The above should produce

abc
xyz

But instead produces

abcxyz