Same keyboard but multiple inputs

[BenMantalo]

Hello, is it possible to have a virtual keyboard for many inputs on the same page ? When I click on an input, the keyboard appear and if I click on a letter, it complete the input I clicked. I tried this : $('.BlocCompletion input').keyboard({ language: 'fr', layout: 'custom', customLayout: { 'default' : touches }, autoAccept: true, autoAcceptOnEsc: true, appendTo: '#'+id, usePreview: false, }); but it works only for the first input ... Any ideas ?

Thanks, Best regards.

[Mottie]

Hi @BenMantalo!

I'm not 100% sure what you're asking, but if you want to add the same content to multiple inputs/elements, then use the change callback option (demo)

$(function() {
  $('#keyboard').keyboard({
    layout: 'qwerty',
    autoAccept: true,
    autoAcceptOnEsc: true,
    usePreview: false,
    change: function(event, kb) {
        $('input.result').val(kb.el.value);
      $('div.result').text(kb.el.value);
    }
  });
});

If you meant that the keyboard isn't initializing correctly on more than one input, using a selector that targets more than one input will work (e.g. $('input.has-keyboard')). If it isn't working then there might be something else interfering. If this is the case, then please modify the demo I shared above to demonstrate the problem.

[BenMantalo]

Hi @Mottie ! Thanks for your reply ! I meant that the keyboard isn't initializing correctly on more than one input. I'm using a selector that targets many inputs on the page ! But I found the problem. You're right, a script was interfering with the keyboard library ! Thanks for your help, Best regards.

[hero9]

Hi @Mottie ! I have issue with the virtual keyboard init for multiple inputs. When I select inputs by tag name $dialog.find("input") and trying to init keyboard for these inputs, appears multiple keyboard instances (e.g 4 inputs => 4 v.keyboards). If you doesn't mind Could you help me to resolve this problem.

Best regards!

options={...{
            layout: 'russian-qwerty',
            appendTo : this.$container,
            position: {
                of: this.$container,
                my: 'center bottom',
                at: 'center bottom',
                at2: 'center bottom'
            },
            css:{input:''},
            usePreview: false,
            alwaysOpen: true,
            autoAccept: true,
            initialFocus:false,
            openOn: '',
            display: { "bksp": "\u232b" },
            accepted:()=>{ this.hide(); },
            canceled:()=>{ this.hide(); }
        },...options};
        this._widget=$inputs.keyboard(options).getkeyboard();