Double input bar + Cancel button issue

[Derrickcdh]

Hi, i seem to have issue when i was upgrading a system that uses a JQuery virtual keyboard.

Previously the version for JQuery was 1.6.1, and the Virtual keyboard using JQuery was 1.8.0. In the mist of upgrading the JQuery to 3.6.0 i also upgraded the Virtual keyboard to the latest version on git here, but the keyboard stopped working as intended.

Currently i've been calling the keyboard via a jsp file.

<script type="text/javascript"> 
$(document).ready(function(){ 
 $('#inputID').keyboard({ 
   openOn : null, 
   stayOpen : true, 
  layout: 'custom', 
  customLayout: { 
   'default' : [ 
    '1 2 3 4 5 6 7 8 9 0', 
    'Q W E R T Y U I O P {bksp}', 
    'A S D F G H J K L {accept}', 
    'Z X C V B N M {cancel} {clear}' 
   ] 
  }, 
  maxLength : 15, 
  restrictInput : true,  
  useCombos : false,  
  accepted : function(e, el){ Form.submit(); }, 
  canceled : function(e, el){ el.focus(); } 
 }); 
    $('#keyboardImg').click(function(){ 

     alert("Before reveal keyboard"); 
     var kb = $('#inputID').getkeyboard(); 
        // close the keyboard if the keyboard is visible and the button is clicked a second time 
        if ( kb.isOpen ) { 
            kb.close(); 
        } else { 
            kb.reveal(); 
        } 

     alert("After reveal keyboard"); 
 }); 
    $('#inputID').focus(); 
}); 

 <html:text property="id" maxlength="15" styleId="inputID" styleClass="textfield" /> 
        <html:img page="/images/keyboard.gif" styleId="keyboardImg" title="Click to open the virtual keyboard (This is a quick Test)" /> 

But the keyboard when clicking ont he keyboard.gif ends up looking like this below:

One of the text box is not usable and i'm unsure how to remove it, i was able to remove when inspecting the keyboard, it seem to open another ui keyboard input wrapper.

There were other issues i have like the cancel button isn't working as intended to close the keyboard, but just making the keyboard unusable and previously when clicking the keyboard.gif once would reveal the keyboard but the keyboard now has to be clicked twice as it gets stuck at kb.reveal(); For this 2 issue would you know where is there a function i can use to replace the old cancel and if you know anything about clicking the button twice for the keyboard to be revealed.

Would greatly appreciate your input, if there's anything i can add on, just ask me i'll add on

[Mottie]

Hi @Derrickcdh!

The second input appears to be the one added by the code to calculate the caret position. But, it shouldn't be visible. In this demo, I forced the second input to be visible by adding the following css:

.ui-keyboard-preview-clone {
  position: static !important;
  visibility: visible !important;
  display: block;
  width: 100% !important;
}

As for the cancel button issue, I'm not sure why it's not working. Would you please update the jsfiddle demo I shared to show the problem you're encountering. It would make it easier for me to troubleshoot the problem.

[Derrickcdh]

Hi @Mottie

I've updated the issue into the demo to as close i think i can get it, i'm able to replicate the cancel issue, i'm also looking at how you've done the cancel and trying to replicate that on my local. The CSS change to hidden seem to work on jsfiddle but on my local it seem it's still there, trying to solve troubleshoot that now.

UPDATE: When clicking the #icon now keyboard pop up instantly on my local after i replaced my "canceled" code from Openon:'focus'

i've also changed my code to below: canceled : function(e, el){ el.focus(); } to canceled: function(e, keyboard, el) {},

However the keyboard doesn't close when i click cancel on my local, but does on the jsfiddle oddly enough

http://jsfiddle.net/4veo2xsa/1/

I'll continue to update this message after i experiment on my local and if it solves any of the 3 issues i'll update here

[Derrickcdh]

Hi @Mottie,

Just another update, i've noticed when i use $('inputID').focus(); it creates a keyboard with only 1 input bar but with display: none, when i change the display to inline or block the keyboard appears but is unusable.

I think the keyboard is created when i use $('inputID').focus(); but not displayed, but when i use kb.reveal(); it creates another keyboard on top of it and that's why there's 2 bars. I'm in the process of figuring out a solution for this. The Cancel issue still persist even after i use the initially given jsfiddle demo.

Just a query, is the virtual keyboard compatible with JQuery3.6.0? and to update the JQuery keyboard would just need to replace the JQuery.keyboard.js? is there other required files i'm missing (i just want to check from the ground up now)

Edit: I've copied your JQuery/Javascript code and the issue persist, in this case where likely the issue be t? the JQuery UI file or JQuery 3.6.0 is not compatible? i'm unsure

[Derrickcdh]

Hi @Mottie ,

I've tried lifting your keyboard Javascript and it doesn't seem to work with JQuery 3.6.0 However when i update the Jquery version to JQuery-1.8.3.min.js it seem to be working, that's seems to be the latest version of JQuery that doesn't break the virtual keyboard. I'm checking through the code, but would you have any idea why the change from 1.8.3 onwards world break the virtual keyboard specifically the bar and the cancel button