Jump to content

Recommended Posts

Posted

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
  • 3 years later...
Posted

 

 

7. UniEdit1.ClientEvents.ExtEvents.OnAfterrender

 

Hi

 

OnAfterrender like this now.

function afterrender(sender, eOpts)

What is must be change for use it?

 

Best Regards.

Posted

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,

Posted

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);   
}
Posted

Hi

 

The character position have been replaced  in any show.

for (a) position (d)  showed,and in (d) position another character  showed.

and in next time, all character position  change.

 

 

Best Regards.

Posted

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
  • 9 months later...
Posted

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);
}
Posted

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';
    }
}
  • 1 month later...
  • 4 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...