'In jquery Keyboard, Can I bind the value I'm typing at Keyboard into the input ?

I'm using jquery keyboard , when I press an input (A) at the screen I open the keyboard at the bottom of the page , so the client can see the input (A) he clicked and the input (B) of the keyboard , as he types the keyboard only the keyboard's input (B) changes until he will confirm , I want (A) to change as well , so value of (B) and (A) will be binded together . If he will not confirm and close the keyboard (A) value should go back to original before opening keyboard .



Solution 1:[1]

We can use the keyboard extension - here is a link to jsFiddle


    $(function() {

  var kb1 = $('#keyboard'),
    kb2 = $('#keyboard2');

  function copyVal(kb) {
    if (kb.id === 'keyboard') {
      // copy value over
      kb2.val(kb.$el.val());
    } else {
      kb1.val(kb.$el.val());
    }
  }

  $('#keyboard, #keyboard2').keyboard({
      usePreview: false,
      change: function(e, keyboard, el) {
        copyVal(keyboard);
      },
      accepted: function(e, keyboard, el) {
        copyVal(keyboard);
      },
      canceled: function(e, keyboard, el) {
        copyVal(keyboard);
      },
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });

});


HTML:

    <div id="wrap">
  <input id="keyboard" type="text" />
  <input id="keyboard2" type="text" />
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1