keyboard for pattern lock

[goebbe]

I am searching for an on-screen keyboard to enter input like in a "pattern lock" Pattern locks are commonly used in smartphones and tablets and consist of a graphical pattern drawn between points. The typical Case is a 3x3 point pattern-grid.

I would like to use online-keyboard in order to input values that are mapped to the pattern grid. Example for a 3x3 pattern grid: Here one can represent each point on the pattern-grid by a number as follows: 1 2 3 4 5 6 7 8 9 In this grid, a pattern can be represented by a series of numbers: e.g. 852369 for a shape that starts a point 8 goes straight to the number 2, next to number 3 and finally straight to number 9.

One workaround would be the use of a numeric keyboard and adapt the layout. (clicking on each field in the correct order)

However, with pattern locks one does usually slide with a finger/ mouse over the pattern grit. With "Virtual Keyboard", is there a possibility to get a key-press-event, when just sliding over a certain key (with a finger or with pressed mouse button)?

[Mottie]

Hi @goebbe!

There is a keyBinding option which is set to mousedown touchstart by default. If you change that to mouseenter (and maybe keep touchstart for mobile?), you can do what you want. This demo will roughly do what you want, but it's a little annoying with the extra keys in there.

$(function() {
  $("#keyboard")
    .keyboard({
      layout: "num",
      // Event (namepaced) for when the character is added to the
      // input (clicking on the keyboard)
      keyBinding: "mouseenter"
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
});

I did try other methods of changing the keyBinding option after you click, but what I have in place cancels out a bunch of the even bubbling, making that external binding really difficult. The above might be your best option.