Actions

Wiki Pages: Home | FAQ | Setup | Usage | Options ( Layout, Language, Useability, Actions ) | Methods | Theme | Log

Add Action Keys

• Add a keyaction function (e.g. $.keyboard.keyaction.test = function(base){};), or extend the variable to add more than one (e.g. $.extend( $.keyboard.keyaction, { test : function(base){}, test2 : function(base){} });)
• Add a display option name update (optional) into the keyboard initialization options. In the example below, if you don't change the display name, the action key name will be "test"
• Add the new action key to your layout by simply wrapping the key name in curly brackets e.g. "{test}"

// Add a "test" keyaction
$.keyboard.keyaction.test = function(base){
  alert('you smell like cheese');
};

$('#junk').keyboard({
  layout: 'custom',
  display: {
    'test' : 'Cheese' // change the test keyaction displayed name to "Cheese"
  },
  customLayout: {
    'default' : [
    // {test} adds the keyaction key and displays the alert
    // "test" will enter the text "test" into the input
    '{test} test'
    ]
  }
});

• See the scientific calculator script for a lot more examples.

Modify an Action Key

• As described in this issue, you could modify the enter key action (both typed and clicked in the virtual keyboard) to submit the form when activated.

$.keyboard.keyaction.enter = function(base){
  if (base.el.tagName === "input") {
    base.accept();      // accept the content
    $('form').submit(); // submit form on enter
  } else {
    base.insertText('\r\n'); // textarea
  }
};

Default Actions

• Any of the following keyaction functions can be modified as desired.
• I wouldn't recommend modifying the "alt", "shift" or "meta" functions. As they change the visible keyset, but I left it in here to show how to determine which keyset is active or to even switch them.

// Action key function list
$.keyboard.keyaction = {
  accept : function(base){
    base.close(true); // same as base.accept();
    return false;     // return false prevents further processing
  },
  alt : function(base,el){
    base.altActive = !base.altActive;
    base.showKeySet(el);
  },
  bksp : function(base){
    base.insertText('bksp'); // the script looks for the "bksp" string and initiates a backspace
  },
  cancel : function(base){
    base.close();
    return false; // return false prevents further processing
  },
  clear : function(base){
    base.$preview.val('');
  },
  combo : function(base){
    var c = !base.options.useCombos;
    base.options.useCombos = c;
    base.$keyboard.find('.ui-keyboard-combo')[(c) ? 'addClass' : 'removeClass'](base.options.css.buttonAction);
    if (c) { base.checkCombos(); }
    return false;
  },
  dec : function(base){
    base.insertText((base.decimal) ? '.' : ',');
  },
  // el is the pressed key (button) object; it is null when the real keyboard enter is pressed
  enter : function(base, el, e) {
    var tag = base.el.tagName, o = base.options;
    // shift-enter in textareas
    if (e.shiftKey) {
      if (o.enterNavigation) {
        // textarea & input - enterMod + shift + enter = accept, then go to prev
        return base.switchInput(!e[o.enterMod], true); // (goToNext, autoAccept)
      } else {
        // textarea & input - shift + enter = accept (no navigation)
        return base.close(true);
      }
    }
    // input only - enterMod + enter to navigate
    if (o.enterNavigation && (tag !== 'TEXTAREA' || e[o.enterMod])) {
      return base.switchInput(!e[o.enterMod], o.autoAccept);
    }
    // pressing virtual enter button inside of a textarea - add a carriage return
    if (tag === 'TEXTAREA' && e.target.parentNode.tagName === 'BUTTON') {
      base.insertText('\n');
    }
  },
  // caps lock key
  lock : function(base,el){
    base.lastKeyset[0] = base.shiftActive = base.capsLock = !base.capsLock;
    base.showKeySet(el);
  },
  meta : function(base,el){
    base.metaActive = ($(el).hasClass(base.options.css.buttonAction)) ? false : true;
    base.showKeySet(el);
  },
  shift : function(base,el){
    base.lastKeyset[0] = base.shiftActive = !base.shiftActive;
    base.showKeySet(el);
  },
  sign : function(base){
    if(/^\-?\d*\.?\d*$/.test( base.$preview.val() )) {
      base.$preview.val( (base.$preview.val() * -1) );
    }
  },
  space : function(base){
    base.insertText(' ');
  },
  tab : function(base) {
    if (base.el.tagName === 'INPUT') { return false; } // ignore tab key in input
    base.insertText('\t');
  }
};

Wiki Pages: Home | FAQ | Setup | Options ( Layout, Language, Useability, Actions ) | Methods | Theme | Log