return the created object keyboard

Gruntfile.js

@@ -45,4 +45,5 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-include-replace');
 
   grunt.registerTask('build', ['includereplace', 'sass', 'uglify']);
+  grunt.registerTask('default', ['includereplace', 'sass', 'uglify']);
 };

demo.js

@@ -13,3 +13,11 @@ $(document).ready(function(){
 $(document).ready(function(){
   $('input#example-4').mlKeyboard({layout: 'it_IT', trigger: '#example-4-btn'});
 });
+
+$(document).ready(function(){
+  $('input#example-5').mlKeyboard({layout: 'fr_FR', trigger: '#example-5-btn'});
+});
+
+$(document).ready(function(){
+  $('textarea#example-6').mlKeyboard({layout: 'pt_PT', trigger: '#example-6-btn'});
+});

docs/advanced_tutorial.md

@@ -128,6 +128,7 @@ From command line perform
 ```bash
 grunt
 ```
+> Remember to execute npm install after cloned the repository
 
 and now you can use your layout with
 

index.html

@@ -69,7 +69,8 @@ <h4>
 
       <div class="col-md-6">
         <div class="example-block">
-          <h4>Cusom keyboard trigger button</h4>
+          <h4>Italian
+          <i>(click vowels to select accents)</i></h4>
           <input type="text" id="example-4" class="col-md-10" placeholder="Try"/>
           <a href='#' id="example-4-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
           <div class='code'>
@@ -84,6 +85,41 @@ <h4>Cusom keyboard trigger button</h4>
       </div>
     </div>
 
+    <div class="col-md-6">
+      <div class="example-block">
+        <h4>French
+        <i>(click vowels to select accents)</i></h4>
+        <input type="text" id="example-5" class="col-md-10" placeholder="Try"/>
+        <a href='#' id="example-5-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
+        <div class='code'>
+          <code>
+            $('input#example-5').mlKeyboard({<br/>
+              &nbsp;&nbsp;layout: 'fr_FR',<br/>
+              &nbsp;&nbsp;trigger: '#example-5-btn'<br/>
+            });
+          </code>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
+      <div class="example-block">
+        <h4>Text Area
+        <i>(click vowels to select accents)</i></h4>
+        <textarea type="text" id="example-6" class="col-md-10" rows="10"></textarea>
+        <a href='#' id="example-6-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
+        <div class='code'>
+          <code>
+            $('textarea#example-6').mlKeyboard({<br/>
+              &nbsp;&nbsp;layout: 'pt_PT',<br/>
+              &nbsp;&nbsp;trigger: '#example-6-btn'<br/>
+            });
+          </code>
+        </div>
+      </div>
+    </div>
+  </div>
+
     <div class="row">
       <div class="col-md-12">
         <h3 class="page-header">Simple Usage</h3>

jquery.ml-keyboard.js

@@ -109,9 +109,10 @@ KeyTab.prototype = new Key();
 KeyTab.prototype.constructor = KeyTab;
 
 KeyTab.prototype.defaultClickAction = function() {
-  // TODO: It's doesn't work if inputs has different parents
-  this.keyboard.$current_input.next(":input").focus();
+  this.keyboard.hideKeyboard();
+  $(":input").eq($(":input").index(this.keyboard.$current_input)+1).focus();
 };
+
   function KeyCapsLock() {
   Key.call(this, arguments);
 
@@ -174,7 +175,7 @@ KeySpace.prototype = new Key();
 KeySpace.prototype.constructor = KeySpace;
   var KEYS_COUNT = 53;
 
-function Keyboard(options){
+function Keyboard(selector, options){
   this.defaults = {
     layout: 'en_US',
     active_shift: true,
@@ -195,7 +196,7 @@ function Keyboard(options){
 
   this.$keyboard = $("<div/>").attr("id", "mlkeyboard");
   this.$modifications_holder = $("<ul/>").addClass('mlkeyboard-modifications');
-  this.$current_input = $("input[type='text']").first();
+  this.$current_input = $(selector);
 }
 
 Keyboard.prototype.init = function() {
@@ -350,15 +351,26 @@ Keyboard.prototype.inputLocalOptions = function() {
 };
 
 Keyboard.prototype.printChar = function(char) {
-  var current_val = this.$current_input.val();
-  this.$current_input.val(current_val + char);
-  this.$current_input.focus().trigger("input");
+  var selStart = this.$current_input[0].selectionStart;
+  var selEnd = this.$current_input[0].selectionEnd;
+  var textAreaStr = this.$current_input.val();
+  var value = textAreaStr.substring(0, selStart) + char + textAreaStr.substring(selEnd);
+
+  this.$current_input.val(value).focus();
+  this.$current_input[0].selectionStart = selStart+1, this.$current_input[0].selectionEnd = selStart+1;
+
 };
 
 Keyboard.prototype.deleteChar = function() {
-  var current_val = this.$current_input.val();
-  this.$current_input.val(current_val.slice(0,-1));
-  this.$current_input.focus().trigger("input");
+  var selStart = this.$current_input[0].selectionStart;
+  var selEnd = this.$current_input[0].selectionEnd;
+
+  var textAreaStr = this.$current_input.val();
+  var after = textAreaStr.substring(0, selStart-1);
+  var value = after + textAreaStr.substring(selEnd);
+  this.$current_input.val(value).focus();
+  this.$current_input[0].selectionStart = selStart-1, this.$current_input[0].selectionEnd = selStart-1;
+
 };
 
 Keyboard.prototype.showModifications = function(caller) {
@@ -416,7 +428,7 @@ Keyboard.prototype.changeKeysState = function() {
 
 
   $.fn.mlKeyboard = function(options) {
-    var keyboard = new Keyboard(options);
+    var keyboard = new Keyboard(this.selector, options);
     keyboard.init();
 
     this.each(function(){
@@ -641,7 +653,8 @@ mlKeyboard.layouts.pt_PT = [
   {d: 'w',u: 'W'},
   {d: 'e',u: 'E', m: [
     {d: 'e', u: 'E'},
-    {d: 'é', u: 'É'}
+    {d: 'é', u: 'É'},
+    {d: 'ê', u: 'Ê'}
   ]},
   {d: 'r',u: 'R'},
   {d: 't',u: 'T'},
@@ -773,3 +786,120 @@ mlKeyboard.layouts.it_IT = [
   {}  // Space
 ];
 
+var mlKeyboard = mlKeyboard || {layouts: {}};
+
+mlKeyboard.layouts.fr_FR = [
+  {d: '\/', u: '|'},
+  {d: '1',u: '&'},
+  {d: '2',u: 'é', m:[
+    {d: '2', u:'é'},
+    {d:'~', u:'É'}
+  ]},
+  {d: '3',u: '#', m: [
+    {d:'3', u:'#'},
+    {d:'"', u: '#'}
+  ]},
+  {d: '4',u: '{', m:[
+    {d: '4', u:'{'},
+    {d: '\'', u:'{'}
+  ]},
+  {d: '5',u: '(', m:[
+    {d: '5', u:'('},
+    {d: '[', u:'('}
+  ]},
+  {d: '6',u: '-', m:[
+    {d: '6', u:'-'},
+    {d: '|', u:'-'}
+  ]},
+  {d: '7',u: 'è', m:[
+    {d: '7', u:'è'},
+    {d: '`', u:'è'}
+  ]},
+  {d: '8',u: '_', m:[
+    {d: '8', u:'_'},
+    {d: '\/', u:'_'}
+  ]},
+  {d: '9',u: '', m:[
+    {d: '9', u:'ç'},
+    {d: '^', u:'Ç'}
+  ]},
+  {d: '0',u: 'à', m:[
+    {d: '0', u:'à'},
+    {d: '@', u:'À'}
+  ]},
+  {d: '°',u: ')', m:[
+    {d: '°', u:')'},
+    {d: ']', u:')'}
+  ]},
+  {d: '+',u: '=', m:[
+    {d: '+', u:'='},
+    {d: '}', u:'='}
+  ]},
+  {}, // Delete
+  {}, // Tab
+  {d: 'q',u: 'Q'},
+  {d: 'w',u: 'W'},
+  {d: 'e',u: 'E', m: [
+    {d: 'e', u: 'E'},
+    {d: 'é', u: 'É'},
+    {d: 'ê', u: 'Ê'}
+  ]},
+  {d: 'r',u: 'R'},
+  {d: 't',u: 'T'},
+  {d: 'y',u: 'Y'},
+  {d: 'u',u: 'U', m: [
+    {d: 'u', u: 'U'},
+    {d: 'ú', u: 'Ú'},
+    {d: 'ü', u: 'Ü'}
+  ]},
+  {d: 'i',u: 'I', m: [
+    {d: 'i', u: 'I'},
+    {d: 'í', u: 'Í'}
+  ]},
+  {d: 'o',u: 'O', m: [
+    {d: 'o', u: 'O'},
+    {d: 'ó', u: 'Ó'},
+    {d: 'õ', u: 'Õ'},
+    {d: 'ô', u: 'Ô'}
+  ]},
+  {d: 'p',u: 'P'},
+  {d: '^',u: 'º'},
+  {d: '`',u: '¨'},
+  {d: '\'',u: '"'},
+  {}, // Caps lock
+  {d: 'a',u: 'A', m: [
+    {d: 'a', u: 'A'},
+    {d: 'á', u: 'Á'},
+    {d: 'à', u: 'À'},
+    {d: 'ã', u: 'Ã'},
+    {d: 'â', u: 'Â'}
+  ]},
+  {d: 's',u: 'S'},
+  {d: 'd',u: 'D'},
+  {d: 'f',u: 'F'},
+  {d: 'g',u: 'G'},
+  {d: 'h',u: 'H'},
+  {d: 'j',u: 'J'},
+  {d: 'k',u: 'K'},
+  {d: 'l',u: 'L'},
+  {d: 'ñ',u: 'Ñ'},
+  {d: ';',u: ':'},
+  {}, // Return
+  {}, // Left shift
+  {d: 'z',u: 'Z'},
+  {d: 'x',u: 'X'},
+  {d: 'c',u: 'C', m: [
+    {d: 'c', u: 'C'},
+    {d: 'ç', u: 'Ç'}
+  ]},
+  {d: 'v',u: 'V'},
+  {d: 'b',u: 'B'},
+  {d: 'n',u: 'N'},
+  {d: 'm',u: 'M'},
+  {d: ',',u: '¿'},
+  {d: '.',u: '?'},
+  {d: 'ç',u: 'Ç'},
+  {}, // Right shift
+  {}  // Space
+];
+