javidan / jkeyboard

Simple jQuery screen keyboard

See In Action

JKeyboard

A simple jQuery on screen keyboard.

Feautures

• Easy Setup
• Switch layout on the Fly
• Supports multiple input fields
• Custom layout

1. Getting Setup

1.1. Installation

• First, copy and paste lib/js/keyboard.js in your project, and link to it before the closing </body> element. Make sure jquery is linked before this.
• Next, you'll need to copy and paste the plugin's css into your project. Both Scss and Css are included for flexibility and modifications.
• Lastly, link to the keyboard css file jkeyboard.css file before the closing </head> element.

Note: This plugin requires your website or application already runs a copy of jQuery, version 1.10.1 or higher.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jkeyboard.js"></script>
<link rel="stylesheet" href="jkeyboard.css">

1.2 The Basics

The first thing you will require is a keyboard holder that will hold the keyboard, and an input field on which the keyboard will operate.

<input type="text" id="search_field">
<div id="keyboard"></div>

$('#keyboard').jkeyboard({
    input: $('#search_field')
});

1.2 Configuration

To configure custom options when you initialize jKeyboard, simply pass an object in your call to jkeyboard:

1.2.1 Simple Example

$('keyboard').jkeyboard({
    input: $('#search_field),
    layout: 'english'
});

1.2.2 Options

Option	type	Default	values	Description
customLayouts	object	{selectable:[]}	selectable, customLayoutName	All the custom layouts as well as custom selectable layouts are defined in this object.
customLayouts.selectable	array	[]		array of selectable custom layouts. If you have more than one custom layout, you can choose which layout to show in the layout switch.
customLayouts.layoutname	an array of keys for keyboards	[]		You can add as many custom layouts as you wish in the format of customLayouts.layoutName. Ex. russian: [ ['й','ц','у','к','е','н','г','ш','щ','з', 'х' ], ['ф','ы','в','а','п','р','о','л','д','ж', 'э'], ['shift','я','ч','с','м','и','т','ь','б','ю', 'backspace'], ['numeric_switch','layout_switch', 'space','return'] ] Click to view in action

1.2.3 Methods

Method	type	values	Description
init	object	layout input customLayouts	All the custom layouts as well as custom selectable layouts are defined in this object.
setLayout	string	azeri english russian numeric numbers_only symbolic *custom layout names*

jkeyboard's Issues

Send a keyup

Hi,
How to send a "keyup" for each letter.
Thanks.

Same keyboard multiple inputs

Hello! Is it possible to use the same keyboard, like one keyboard only, and use it for all the inputs?
Like if I click onto another input and I click a key on the keyboard, it will register/appear on the current input box, not on the previous? Thank you very much.

P.S.
Sorry, just a beginner.
Thanks again!

Pressing backspace leaves cursor in the wrong position

If you type for example: "ABCDEFG" then press the backspace button, then type "1" you shojudl end up with: "ABCDEF1" but you actually end up with "1ABCDEF" as the cursor has moved to the start of the text.

Also if I type "ABCDE" and move the cursor between the C and the D and then press backspace I would expect to see "ABD" bu instead I get "ABC" as it always deletes the last character.

I am not sure if suggesting code changes in an issue is correct, so apologies if it isn't but I changed the backspace function in the code to the following and it appears to have fixed both issues for me:

backspace: function () {
		var input = this.settings.input,
			input_node = input.get(0),
			start = input_node.selectionStart,
			val = input.val();    

		if (start > 0) {
			input.val(val.substring(0, start - 1) + val.substring(start));
			input.trigger('focus');
			input_node.setSelectionRange(start - 1, start - 1);
		}
		else {
			input.trigger('focus');
			input_node.setSelectionRange(0, 0);
		}
		
	},

How right in to two input

I have input and textarea how can i write to both

<div class="card">
<input type="text" class="card-name-input"  placeholder="Name">
<textarea name="" id="" cols="1" rows="5" class="card-message-input"  placeholder="Message"></textarea>
<div id="keyboard"></div> 
</div>

$('#keyboard').jkeyboard({
 
  input: $('.card-name-input'),
  layout: 'english',
 

});

Multiple Fields wt Once KeyBoard

Dear,
If it's not too much for you can you please let me know how to handle multiple inputs in a sigle page?
and one of that is number.

<input type="text" id="fname" name="firstname" placeholder="Full Name"></br>
<input type="text" id="email" name="email" placeholder="E-Mail">

<input type="number" id="phone" name="phone" placeholder="Phone"></br>

Regards,
Omar Khan

Uncaught TypeError: Cannot read property 'command' of undefined

After pressing backspace (not phisical keyboard) I'm got this error on Chrome browser:

jkeyboard.js:226 Uncaught TypeError: Cannot read property 'command' of undefined
    at HTMLLIElement.<anonymous> (jkeyboard.js:226)
    at HTMLLIElement.dispatch (jquery.min.js:2)
    at HTMLLIElement.y.handle (jquery.min.js:2)

Slow

When keys are pressed quickly, one to another, jkeyboard loses some letters . Is there any solution?

License for use

I'm looking to use this in a project that I may or may not be selling. What kind of lisence does this project have? MIT, WTFPL, Copyleft, or something else?

CSS .active is not valid, need to update to :active

Self explanatory. The .active class is not used anywhere in the code, so it really should be the :active pseudo-element, allowing different styling when the button is pressed vs when the button is hovered over.

Insert letter

Hi, can you help me?
How can i insert a letter by keyboard plugin in the cursor position?
Thank you.

In angular 5 This one working at first time only

I implemented in angular 5, it is working for the first time at in modal window after going to next page by using routing concept and come back to the first page is not working.

support for input type 'email'

Currently I have an input with html type attribute of email.

I know for now it could be changed to a type of text but for future support it would be better

It returns the following error:

Close function

First of all, thank you for your great work.

I need to close the keyboard using 'return' key without submitting the form. Has the plugin any function to do that?

Also, it is possible to display an input to show what you are typing in the case of the keyboard is above the fields?