Wrong caret positioning in input with "text-align:center"

[nlosinsky]

Hi,
I found wrong caret positioning in keyboard input when used property "text-align:center". It's shifted to the right regarding to the center. Cursor positioning is OK, but caret.

I guess the problem is in the string:
style.width = parseInt( isInput ? element.scrollWidth : computed.width, 10 ) + ( isInput ? 50 : 0 ) + 'px';
in the file jquery.keyboard.extension-caret.js

Thanks

[Mottie]

Hi @nlosinsky!

Thanks for reporting this problem! I'll see what I can do.

In the mean time, you can set the offsetX to -23 (px) to sort of re-align the caret (it depends on the font-size), but only in Webkit browsers, Firefox works fine - demo: http://jsfiddle.net/Mottie/egb3a1sk/1205/

$(function() {

  $('#keyboard').keyboard({
      usePreview: false
    })
    .addCaret({
      // extra class name added to the caret
      // "ui-keyboard-caret" class is always added
      caretClass: '',
      // *** for future use ***
      // data-attribute containing the character(s) next to the caret
      charAttr: 'data-character',
      // # character(s) next to the caret (can be negative for RTL)
      charIndex: 1,
      // caret position adjustments
      // firefox doesn't need adjustment; webkit does
      offsetX: typeof window.mozInnerScreenX !== 'undefined' ? 0 : -23,
      offsetY: 0
    })
    .addTyping({
      showTyping: true,
      delay: 250
    });

});

I'll see if I can find a better internal fix that doesn't rely on arbitrary numbers.

[nlosinsky]

Hi @Mottie,

Thanks for so quick reply.

Actually, I have a specific project that focuses only on Chrome browser and I have many inputs with keyboard support with only one constructor for all of them. One part of inputs have left alignment another one - centered. The only workaround I found is setting manually $.keyboard.firefox = true during initializing. It works fine for me, but currently I don't know about possible pitfalls.

[Mottie]

Ok, this problem has been fixed and v1.25.21 is now available!

[nlosinsky]

Great, thank you!