Jump to content

JavaScript Graphical / Virtual Keyboard Interface


Sherzod

Recommended Posts

JavaScript Graphical / Virtual Keyboard Interface.

 

post-906-0-00365000-1380716805_thumb.png  post-906-0-03768800-1380717083_thumb.png

 

http://www.greywyvern.com/code/javascript/keyboard

 

how to use?

 

Download the following files:

 

1. http://www.greywyvern.com/code/javascript/keyboard.js

2. http://www.greywyvern.com/code/javascript/keyboard.css

3. http://www.greywyvern.com/code/javascript/keyboard.png

 

4. UniServerModule CustomFiles Add

                      files/keyboard.js

                      files/keyboard.css
 
5. Keyboard.png I added to the root directory...
 
6. Add to form UniEdit1.
 
7. UniEdit1.ClientEvents.ExtEvents.OnAfterrender
 function OnAfterrender(cmp) {                    
   // focus on field
   Ext.QuickTips.init();                    
   Ext.defer(function () {
     cmp.inputEl.dom.focus();
   }, 100);


   // listen virtual keyboard keys
   cmp.inputEl.on({
     mousedown: function (ev) {
     if (ev.target.tagName === 'TD') {
       // We trigger change event only on textfield with the focus
       if (document.activeElement) {
         if (document.activeElement.id === cmp.inputEl.dom.id) 
            cmp.fireEvent('change');
       }
     }
     },
     delegate: '#keyboardInputMaster'
   });
                                        
   cmp.inputEl.dom.style.width = "75%";
   
   VKI_attach(cmp.inputEl.dom);   
}

Sincerely...

  • Upvote 5
Link to comment
Share on other sites

  • 3 years later...

Hi,

 

Hi

 

OnAfterrender like this now.

function afterrender(sender, eOpts)

What is must be change for use it?

 

Best Regards.

 

Like this:

function afterrender(sender, eOpts)
{
   var cmp = sender;
   // focus on field
   Ext.QuickTips.init();                    
   Ext.defer(function () {
     cmp.inputEl.dom.focus();
     cmp.inputEl.dom.style.width = "70%";
   }, 100);


   // listen virtual keyboard keys
   cmp.inputEl.on({
     mousedown: function (ev) {
     if (ev.target.tagName === 'TD') {
       // We trigger change event only on textfield with the focus
       if (document.activeElement) {
         if (document.activeElement.id === cmp.inputEl.dom.id)
            cmp.fireEvent('change');
       }
     }
     },
     delegate: '#keyboardInputMaster'
   });
   
   VKI_attach(cmp.inputEl.dom);   
}

Best regards,

Link to comment
Share on other sites

and who to move Keyboard.png from root directory to the files directory?

 

VKI_imageURI = "files/keyboard.png";

function afterrender(sender, eOpts)
{
   var cmp = sender;
   // focus on field
   Ext.QuickTips.init();                    
   Ext.defer(function () {
     cmp.inputEl.dom.focus();
     cmp.inputEl.dom.style.width = "70%";
   }, 100);


   // listen virtual keyboard keys
   cmp.inputEl.on({
     mousedown: function (ev) {
     if (ev.target.tagName === 'TD') {
       // We trigger change event only on textfield with the focus
       if (document.activeElement) {
         if (document.activeElement.id === cmp.inputEl.dom.id)
            cmp.fireEvent('change');
       }
     }
     },
     delegate: '#keyboardInputMaster'
   });
   
   VKI_imageURI = "files/keyboard.png"; // <---------------------------
   VKI_attach(cmp.inputEl.dom);   
}
Link to comment
Share on other sites

Not sure what an "accident character"  is but maybe there is a setting for language/region?

 

Default keyboard layout:

 

To change the default keyboard which displays first for each different page, change the value of the this.VKI_kt variable to the name of the keyboard. For example, to make the default keyboard "French", change the value like so: this.VKI_kt = "French";.

 

Or:

VKI_attach(cmp.inputEl.dom);
cmp.inputEl.dom.setAttribute("lang", "fr");

post-906-0-04458800-1501784137_thumb.png

  • Upvote 1
Link to comment
Share on other sites

  • 9 months later...

Hi,

 

Can you try this?:

function afterrender(sender, eOpts) 
{
    // focus on field
    var cmp = sender;
    Ext.QuickTips.init();
    Ext.defer(function() {
        cmp.inputEl.dom.focus();
    }, 100);

    // listen virtual keyboard keys
    cmp.inputEl.on({
        mousedown: function(ev) {
            if (ev.target.tagName === 'TD') {
                // We trigger change event only on textfield with the focus
                if (document.activeElement) {
                    if (document.activeElement.id === cmp.inputEl.dom.id)
                        cmp.fireEvent('change');
                }
            }
        },
        delegate: '#keyboardInputMaster'
    });

    VKI_attach(cmp.bodyEl.dom);
}
Link to comment
Share on other sites

Hi,

 

Hi

 

It's displayed.but how to can manipulate it's with.

 

 

Best Regards.  

 

Yes sorry,

 

Try this:

function afterrender(sender, eOpts) 
{
    // focus on field
    var cmp = sender;
    Ext.QuickTips.init();
    Ext.defer(function() {
        cmp.inputEl.dom.focus();
        cmp.inputEl.dom.style.width = "70%";
    }, 100);

    // listen virtual keyboard keys
    cmp.inputEl.on({
        mousedown: function(ev) {
            if (ev.target.tagName === 'TD') {
                // We trigger change event only on textfield with the focus
                if (document.activeElement) {
                    if (document.activeElement.id === cmp.inputEl.dom.id)
                        cmp.fireEvent('change');
                }
            }
        },
        delegate: '#keyboardInputMaster'
    });

    VKI_attach(sender.inputEl.dom);

    var vkb = cmp.el.query('.keyboardInputInitiator')[0];
    if (vkb) {
        vkb.style.position = 'absolute';
        if (cmp.rtl) {
            vkb.style.left = '0px'
        } else {
            vkb.style.right = '0px'
        }
        vkb.style.top = '0px';
        vkb.style.padding = '3px 1px';
    }
}
Link to comment
Share on other sites

  • 1 month later...
  • 4 months later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...