mottie/keyboard

Virtual Keyboard using jQuery ~

keyboard's Issues

Hide keyboard when key is clicked.

I have an instance where I'm using the keyboard to display the US states. When a state is clicked, I want the keyboard to dissappear. I'm using the code below currently, but it prevents the keyboard from being shown when you focus on the "State" field again. What is the best way to accomplish this?

    $('.keyboard-states').keyboard({
    layout : 'custom',
    autoAccept : 'true',
    customLayout: {
          'default' : [
            'AL AK AZ AR CA CO CT DE FL GA',
            'HI ID IL IN IA KS KY LA ME MD',
            'MA MI MN MS MO MT NE NV NH NJ',
            'NM NY NC ND OH OK OR PA RI SC',
            'SD TN TX UT VT VA WA WV WI WY',
            '{accept}{clear}'
          ]
        },
    usePreview: false,
    visible: function(e, keyboard, el) {
        keyboard.$el.addClass('current');
        keyboard.$el.val('');
        $("button.ui-keyboard-widekey").addClass('state-button');
        $("div.primary").css('padding-bottom','295px');
        $("button.state-button").click(function(){
            keyboard.$el.removeClass('current');
            $("div.ui-keyboard").css('display','none');
            $("button.ui-keyboard-widekey").removeClass('state-button');
            $("div.primary").css('padding-bottom','0px');
        });
        },
    beforeClose: function(e, keyboard, el, accepted) {
        keyboard.$el.removeClass('current');
        $("button.ui-keyboard-widekey").removeClass('state-button');
        $("div.primary").css('padding-bottom','0px');
        }
});

"Word keys" do not work.

Example:

        $('.keyboard.month').keyboard({
            restrictInput : true,
            preventPaste : true,
            autoAccept : true,
            layout: 'custom',
            customLayout: {
                'default' : [
                'January February March April',
                'May June July August',
                'September October November December',
                '{accept} {cancel}'
                ]
            },
        });

Submit form on enter

Hello,

When i click on shift or altgr, cancel... in the field show "shift" "alt" "cancel"... this keys dont work...

Thanks

Shift (and probably Alt) should work on meta# layouts too

If you are on a meta key layer it should be possible to use shift for this meta layout.

This means beside the meta1 layout you should be able to define meta1-shift.

It would probably be good to make this work for alt too.

lost focus erase input

Hi mottie, when i put theses options

            usePreview: false,
            stayOpen: true,
            lockInput: true,

when i click out of keyboard area i lose all data typed, even in playground http://jsfiddle.net/Mottie/Em8sG/ it happen

With upgrade to 1.9.x IE6 doesn't work

After my upgrade from 1.8.17 to 1.9.x the keyboard doesn't work.

lockInput bug : base.lastCaret is not defined

Hello,
I think I found a problem. It appears when I use the option lockInput : true. It also appears on the main demo page on the "QWERTY Text Area" which use this option. Firebug send me an error message : base.lastCaret is not defined (line 351).

Hope this will help you and thanx for your work :)

Form submit?

i have my keyboard attached to a div inside a form.. and when i clik one of the buttons of the keyboard it tryes to submit my form!.. i've read the code and i dont find where this problem might be.. it works properly in firefox, but in chrome, safari and ie tryes to submit.. help!

PD : Sorry for my english.

active virtual keyboard just from icon

for example:

<div id="wrap">
    <input id="keyboard" type="text">
    <img id="icon" src="demo/keyboard.png">
</div>
<script>
$('#icon').click(function() {
    var kb = $('#keyboard').getkeyboard();
    kb.reveal().typeIn(simulateTyping, 500, function() {

    });
</script>

i need just active virtual keyboard from icon. ,not textbox(input tag)
can you set a complete example(header and body) for this action?

events & properties

Maybe I should have opened 2 issues, but I'm too lazy right now to do this.
First thing that I think could bring an extra to your keyboard is some sort of event handler for "onbeforeupdate" ("onbeforeaccept") ... I'm building right now some sort of an app for touchscreen/pos that needs to perform a stock check BEFORE actually updating the qty field in a cart. So I just need to precheck. I tried eveyrthing, but cannot get this done properly with the current event handlers, I'm doing some tricks to get it working.
Second thing is I couldn't find any way of getting the value of the keyboard input field in any way. If I call "this.value", it is tied to the (receiving) field value ... I've read through the docs, tried all sort of things, cannot get it. Maybe I'm dumber than others? Can you please help with this?
Also, I noticed the positioning isn't that great ... I'm trying to right align the keyboard margin to the field margin, just underneath the field itself, I managed to align vertically but couldn't align right. In fact it seems that the second parameter of the offset doesn't even work at all, at it always displays the field at the same position/offset horizontally. Here's the part of code used:

position : {
of : '.pricesqty',
my : 'left top',
at : 'left bottom',
offset: '35 15',
},
In the above example, no matter I change 15 to 100 or to -150 (trying to right align with the field) it stays in the same place :) Don't know if this is a bug or improper usage, just telling you about it

Cheers
Dragos

enter button

For a text input, pressing enter on the virtual or real keyboard should act as if the user is pressing enter on the actual text input (after accepting the new text). Typically, I think this would be a form submit. Pressing "accept" would replace the text without submitting the form.

Also, I think clicking outside of the virtual keyboard should perform an accept. Perhaps make that optional if some people prefer that the "accept" button must be clicked in order to change any values. Personally, I would prefer the keyboard modify the text input directly rather than create its own, but I guess it looks better when its text input uses the entire width of the virtual keyboard.

keyboard.destroy() fails (base.$keyboard is undefined)

First of all, great work!
I need to activate/deactivate the keyboard with a checkbox. I'm using .keyboard(...) and .getkeyboard().destroy() to do it.
But removing a keyboard with "getkeyboard().destroy()" fails when the keyboard is not visible with error:

Uncaught TypeError: Cannot call method 'remove' of undefined
$.keyboard.base.destroy                              jquery.keyboard.js:695

It works when the keyboard is visible. Should I use "$('#inputWithVKB').getkeyboard().startup();$('#inputWithVKB').getkeyboard().destroy()" instead? Is there a better way to do it?

Code:

<script src="https://github.com/Mottie/Keyboard/raw/master/js/jquery.keyboard.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){$('#inputWithVKB').keyboard();});
</script>
<form onsubmit="return false">
<p><button onclick="$('#inputWithVKB').getkeyboard().destroy()">getkeyboard.destroy()</button></p>
<p><input id="inputWithVKB"/></p>
</form>

Thanks!

Enter with 2 rows instead 2 columns

Hi Mottie,

Is it possible? i have a button like Enter in my case this is a Enter button with 2 rows instead 2 columns,

tks

Keys with 0n do not work (ie, 01, 02, 03)

Does not work:

        $('.keyboard.day').keyboard({
            restrictInput : true,
            preventPaste : true,
            autoAccept : true,
            layout: 'custom',
            customLayout: {
                'default' : [
                '01 02 03 04 05 06 07',
                '08 09 10 11 12 13 14',
                '15 16 17 18 19 20 21',
                '22 23 24 25 26 27 28',
                '29 30 31',
                '{accept} {cancel}'
                ]
            },
        });

Works:

        $('.keyboard.day').keyboard({
            restrictInput : true,
            preventPaste : true,
            autoAccept : true,
            layout: 'custom',
            customLayout: {
                'default' : [
                '1 2 3 4 5 6 7',
                '8 9 10 11 12 13 14',
                '15 16 17 18 19 20 21',
                '22 23 24 25 26 27 28',
                '29 30 31',
                '{accept} {cancel}'
                ]
            },
        });

readonly & disabled attributes

Hi Mottie, pestering you again :)
Here's what happens this time: the keyboard should be aware of the "disabled" and "readonly" attributes being set on the fields the keyboard is attached to. No matter it is dynamically or statically attached to a field, an attribute of "disabled" set should just not allow the keyboard to show in that field, and an attribute of "readonly" set should not allow the kb to set the value of that field, but would still show (maybe with a small something notifying the user the field is readonly? you'll decide) .... What do you think about it ?

Regards
Dragos

Synchronize two keyboards

If you have two input fields and you want to simulate a single keyboard for both of them you have to place two keyboards at the same position. This works.

However the experience for the user when switching keyboards is strange. Because the keyboards can have different states (shift vs non-shift).

Is there a way to synchronize them or to reset the keyboard to a default state everytime you change between them?

Keyboard moves slightly each time it's opened

The keyboard moves or is drawn slightly to the left each time it is open. Eventually, half the keyboard is off the screen and it becomes unusable.

Cursor goes to the begining if you dont have LockInput on.

Demo: Qwerty Text has the problem, Qwerty Text Area doesn't.
(lockInput: true) is set for Qwerty Text Area.

Problem: When you click on the background or black space of the virtual keyboard the cursor disappears. When you start clicking on values again you will notice the cursor moved to the begining and the new characters are entered there.

This does not happen when you turn lockinput on.

Always visible

Is it possible to make keyboard always visible, and as the user clicks several input/textarea, it picks the correct selector?

RE: Disable Actual Keyboard Input

Hi there. I was thinking of using the virtual keyboard for a login screen. So, in theory, the virtual keyboard should only accept selections from mouse clicks instead of keyboard keystrokes/clicks. Is this possible?

Tab does not work in Google Chrome

The virtual tab does not work? I've tried changing various options without any luck.

Allow tab navigation from input fields

Is it possible to still use the tabkey on the physical keyboard to navigate into/from a field enhanced by the javascript keyboard?

keyboard position

How do you reposition the keyboard?

Button's layouts (non button positioning)

Hi Mottie,

congratulation your perfect project!. I love it :-)

I designed a special speedometer input keyboard with the customLayout but I cant find 'nonButton' spacer.

example:

        customLayout: {
          'default' : [
            '1 2 3 {bksp}',
            '4 5 6 {accept}',
            '7 8 9 {cancel}',
            '0'
          ]
        }

I like that '0' zero button is under '8' button for better design. Is it possible?

I tried css.

 .ui-keyboard-48 {
    width: 10.5em;
}

It would be good if I don't use more keyboard layouts, but i have other keyboards for alfanumeric inputs.

Something like this would be appreciated:

        customLayout: {
          'default' : [
            '1 2 3 {bksp}',
            '4 5 6 {accept}',
            '7 8 9 {cancel}',
            '0 {empty}'
          ]
        }

css:

.ui-keyboard-48 {
    width: 6.5em;
}

or without css

        customLayout: {
          'default' : [
            '1 2 3 {bksp}',
            '4 5 6 {accept}',
            '7 8 9 {cancel}',
            '{empty} 0 {empty} {empty}'
          ]
        }

Note: {empty} - non button

Regards,
tgely

'c characters

when typing 'c (apostrophe then the character c) into the virtual keyboard, it becomes the character ç. is this the intended function?

Infinite loop within insertText if caret = 0

Keyboard version 1.7.3
Using Internet Explorer 8

If you enter text and then move the caret back to the beginning of the preview and the next text input will cause an infinite loop inside the insertText function.

The while loop at line 340 will never end if caret is 0. I fixed the problem in my project by changing the condition at line 334 to "if (base.msie && caret > 0)" and it's working fine now.

Change CSS

Hello Mottie

I put the keyboard background in white color, but still have a border and i want remove the border, the problem is when i remove the border delete the border of the field to... i want only remove the border of keyboard...

.ui-widget { font-family: Segoe UI, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Segoe UI, Arial, sans-serif; font-size: 1em; color:#000000; }
.ui-widget-content { border: 1px solid #666666; background: #ffffff url(images/ui-bg_inset-soft_25_000000_1x100.png) 50% bottom repeat-x; color: #ffffff; }
.ui-widget-content a { color: #ffffff; }
.ui-widget-header { border: 1px solid #333333; background: #333333 url(images/ui-bg_gloss-wave_25_333333_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

control keyboard with cursor keys

i have looked in the faq & read over the wiki but found nothing about it. i would need a virtual keyboard which is controlable by the cursor keys and an enter key, like on a remote control.
is your keyboard capable of this?

Support: Any way to create a key that inputs multiple chars at once?

Is there any way to set up a key that, when pressed, will input multiple characters at once? The use case is a ".com" key that will insert .com in the field, which is handy for entering email addresses.

Thanks!

Autocomplete no select event when clicking item

Situation:

Keyboard with autocomplete and addAutocomplete, when clicking an item with the mouse (or touch screen) there is no select event triggered.

Virtual Keyboard doesn't appear in jQuery Mobile Dialogs

I'm trying to attach Virtual Keyboard to 'mypage' which opens as dialog using:

<a href="#mypage" data-role="button" data-rel="dialog" data-transition="none">Create a service request</a>

The JS code is:

        $( '#mypage' ).live( 'pageinit',function(event){

            $(function(){
                    console.log($('#keyboard').val());
                    
                    var k = $('#keyboard'),
                    kbOptions = {
                        keyBinding : 'mousedown touchstart',
                        // make sure jQuery UI styles aren't applied even if the stylesheet has loaded
                        // the Mobile UI theme will still over-ride the jQuery UI theme
                        css : {
                            input          : '',
                            container      : '',
                            buttonDefault  : '',
                            buttonHover    : '',
                            buttonActive   : '',
                            buttonDisabled : ''
                        }
                    };
            
                    k
                        .keyboard(kbOptions)
                        /* initial setup for mobile extension */
                        .addMobile({
                            // keyboard wrapper theme
                            container    : { theme:'a' },
                            // theme added to all regular buttons
                            buttonMarkup : { theme:'a', shadow:'true', inline:'true', corners:'false' },
                            // theme added to action buttons (e.g. tab, shift, accept, cancel);
                            // parameters here will override the settings in the buttonMarkup
                            buttonAction : { theme:'b' },
                            // theme added to button when it is active (e.g. shift is down)
                            // All extra parameters will be ignored
                            buttonActive : { theme:'e' }
                        });
            });

        });

Page code is:

<div data-role="page" id="mypage">
        
        <div data-role="header" data-theme="a">
            <h1>Page title</h1>
            
        </div>

        <div data-role="content" data-theme="b">

            <form method="post" data-ajax="false" action="script.php">

                <div data-role="fieldcontain">
                    <label for="keyboard">Input Field #:</label>
                    <input type="text" name="keyboard" id="keyboard" />
                </div>
                
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a">
                        <button type="submit" name="submit" value="submit" data-inline="true">Submit</button>
                    </div>
                    <div class="ui-block-b">
                        <a data-role="button" data-rel="back" data-theme="b">Cancel</a>
                    </div>
                </fieldset>

            </form>
        </div>
    </div><!-- /page -->        

I use
jQuery Mobile 1.0 final,
jQuery 1.7.1,
jQuery UI 1.8,
Mottie Keyboard 1.9.4

Google Chrome 16.0.912.77 (Official Build 118311)

Keyboard repeat support

Hi Mottie,

I thought about a feature that would be nice to have in the keyboard. On physical keyboards the when you hold down a key the keyboard starts repeating this key. It would be nice to have this behavior too. It would be especially useful on touchscreens.

The behavior I thought about would be as follows:
When you start pressing a key the keyboard enters the character once. Then after a certain delay the keyboard starts repeating the character at a certain rate. I think delay and rate should be configurable to the desired time interval/frequency.

Do you already have an Idea how to implement this? Or should I try to come up with something?

Cheers
Pascal

Add class to input while keyboard is open?

Is there a way to apply a class to the original input field while the keyboard is open?

enter/backspace doesn't work on IE9

Using the QWERTY Text Area demo... type some text, follow with Enter-key, on IE9 a space shows up, type another Enter-key then moves to new line. Then type Backspace-key, nothing happens... can't delete characters. IE9 compatability view doesn't help. IE8 similar problems.

Select text when keyboard is opened?

Is it possible to select all the existing text in a field when the keyboard is opened? I've managed to select all the text in the original field just before the keyboard is opened, but the status doesn't seem to get copied into the keyboard's field. Can this be done without editing the plugin code?

Multiple Input Textbox on screen

How do you have multiple inputs on screen, like a form using the same Keyboard java script?

First Name ( input type"text" name="fname" ID="keyboard"
Last Name ( input type="text" name="lname" ID="keyboard"

Can you call the same Keyboard function for diferent inputs on the screen. How would you set this up in the function call?

Sorry I am a newbe at Jquerry

Mac keboard overriding viritual keyboard

Hey!

This keyboard is fantastic - but my mac keyboard is overriding everything I type.

For example, when I go to the German keyboard and press [ (what is showing as ü) it is defaulting to the brackets.

Also, when I try to press special keys, it uses the defaults (option + o makes ø, instead of ö).

Am I missing something?

Cheers,

Position not correct in a jQuery Mobile application

Hello,

If I want to use a keyboard on a text input in a page of jquery mobile application, they keyboard is always shown in the upper left corner of the browser, not on the textarea... Tried adding a position but nothing changes. Any suggestions?

var k = $('#keyboard'),

    kbOptions = {
        keyBinding : 'mousedown touchstart',
        alwaysOpen : false,
        // make sure jQuery UI styles aren't applied even if the stylesheet has loaded
        // the Mobile UI theme will still over-ride the jQuery UI theme
        css : {
            input          : '',
            container      : '',
            buttonDefault  : '',
            buttonHover    : '',
            buttonActive   : '',
            buttonDisabled : ''
        }       
    };

    k
        .keyboard(kbOptions)
        .addMobile({
            // keyboard wrapper theme
            container    : { theme:'a' },
            // theme added to all regular buttons
            buttonMarkup : { theme:'a', shadow:'true', inline:'true', corners:'false' },
            // theme added to action buttons (e.g. tab, shift, accept, cancel);
            // parameters here will override the settings in the buttonMarkup
            buttonAction : { theme:'b' },
            // theme added to button when it is active (e.g. shift is down)
            // All extra parameters will be ignored
            buttonActive : { theme:'e' },
            position: {
                of: k, // null = attach to input/textarea; use $(sel) to attach elsewhere
                my: 'center center',
                at: 'center center',
                at2: 'center center' // used when "usePreview" is false
            }
        });

Positioning of keyboard

Hi, I would like to position the keyboard in the middle of my screen (Rather then in relation to the text input area), both horizontally and vertically, is this possible?

I have had a look at the documentation and can;t figure it out.... sorry!

Keyboard width increases slightly each time it is revealed in Internet Explorer

In Internet Explorer, the keyboard's width increases slightly every time you open it.

I was able to reproduce the problem using the demo page with IE8. I think the problem is isolated to line 173:

.css('width', ((base.msie) ? base.$keyboard.width() : '100%' )) // IE thinks 100% means across the screen

If I comment this out, the keyboard works fine in all the browsers I tested.

Active shift/alt prevents going to meta layers if no meta#-shift/alt is defined

To reproduce the problem do the following:

We have the following layers defined:
default
default-shift
meta1

If the currently active layout is default-shift and i click on the meta1 the keyboard doesn't do anything. This is due to the fact that it tries to go to meta1-shift which doesn't exist.

The solution to this problem I propose would be to automatically change shift to inactive whenever a meta key is pressed.
What do you think about this approach?

Enabling the keyboard on Ajax Chat

Hi

I have had quite alot of trouble enabling your keyboard on my Ajax Chat.

I want to use touch screen for this chat but i cant seem to make it work.

there is some kind of conflict because the keyboard never shows no matter what i try.

anybody have any idea or experience with something related to this issue?

Clicking Accept or Cancel continues to propagate click event

Excellent plugin! Just noticed one issue: If the Accept or Cancel button happens to get placed right above another keyboard-enabled input field, clicking on Accept or Cancel results in the new keyboard getting open. In other words, the click event doesn't stop when you close the keyboard -- it continues to whatever is below.

Is there any way to stop this event from getting propagated when the keyboard is closed?

Remove keys & Open keyboard automatically

Hello,

It is possible remove some keys? how?

It is possible have the keyboard open... everytime open... when we go to the page see the keyboard without click.

The keyboard lost some characters in IE7 & IE8

When we use the keyboard and typing quickly on it, some characters doesn't show on the textbox.

Virtual Keyboard Navigate Demo

Hi Mottie, I tested Virtual Keyboard Navigate Demo at the time, found that when the focus after the virtual keyboard, by moving the arrow keys to select a button, and then hit the Enter key to enter the selected character, then loop the same characters appear.

Adding keys is broken when Array is extended

Because a for .. in loop is used to iterate over an array, addKey ends up being called for various array methods and properties, particularly when the Array prototype is extended. This is an issue if you are using jQuery together with Prototype, for example.

Fix is to change https://github.com/Mottie/Keyboard/blob/master/js/jquery.keyboard.js#L461 to use for(var key; key < keys.length; key++)

Textarea jumps around

Open keyboard to show a textarea (I tested with the "Alphabetical" item from the demo: http://mottie.github.com/Keyboard/)

Paste in the text below and then start typing after you paste. You'll notice that the box scrolls/jumps around as you type.

Sample text:
The arrival of the super-dreadnought is commonly believed to have started with the British Orion class. What made them 'super' was the unprecedented 2,000-ton jump in displacement

I've verified this on Firefox 6 and Chrome 14.

Enter do Submit

Hello,
It is possible make the key enter do the form submit?

Thanks

el.value undefined

I´m trying to access el.value but all I get is undefined. However if I use el.$preview[0].value i get the selected value as wanted. The bug is also present on the demopage for mottie keyboard and the "Custom: Junk" demo.
http://mottie.github.com/Keyboard/

Am I missing something or is it really a bug?

Cheers!

/ Marcus