Extension Caret

Caret (Demo)

Add a caret, which can be styled, to the input or textarea

Setup

Page Head

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- jQuery UI theme or Bootstrap (optional, if you create a custom theme) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery UI position utility (optional, if you position the keyboard yourself) -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<!-- keyboard widget css & script -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<script src="js/jquery.keyboard.extension-caret.js"></script>

<!-- optional plugins -->
<script src="js/jquery.mousewheel.js"></script>

CSS

/*** Caret extension definition; included in keyboard.css ***/
/* margin-top => is added to the caret height (top & bottom) */
.ui-keyboard-caret {
  background: #c00;
  width: 1px;
  margin-top: 3px;
}

To add a blinking caret, include the following CSS; make sure to change the caretClass option to match the class name:

/* Additional css to make the caret blinky; NOT included in the
 keyboard.css file */
.blinking-cursor {
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation:    1s blink step-end infinite;
  -ms-animation:     1s blink step-end infinite;
  -o-animation:      1s blink step-end infinite;
  animation:         1s blink step-end infinite;
}
@keyframes "blink"         { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-moz-keyframes blink      { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-webkit-keyframes "blink" { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-ms-keyframes "blink"     { from, to { opacity: 100%; } 50% { opacity: 0; } }
@-o-keyframes "blink"      { from, to { opacity: 100%; } 50% { opacity: 0; } }

Javascript

// QWERTY Text Area
// ********************
$('#qwerty')
  .keyboard()
  .addCaret({
    // extra class name added to the caret
    // "ui-keyboard-caret" class is always added
    caretClass : 'blinking-cursor',
    // *** 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 adjustments ***
    // adjust horizontal position (pixels)
    offsetX    : 0,
    // adjust vertical position (pixels); also adjust margin-top in css
    offsetY    : 0,
    // adjust caret height (pixels)
    adjustHt   : 0
  });

Options

caretClass

Default: ""
Type: String

Extra class name added to the caret element. A class name of "ui-keyboard-caret" class is always added.

charAttr

Default: "data-character"
Type: String

The named data-attribute which will contain the character or characters next to the caret. The contents of this data-attribute are modified by the charIndex value.

charIndex

Default: 1
Type: Number

Set the number of characters next to the caret. The set number of characters will be added to the charAttr data-attribute.

• When set to 1 the single character immediately to the right of the caret will be contained in the attribute.
• When set to 2 the next two characters immediately to the right of the caret will be contained in the attribute.
• When set to any positive number, that number of characters immediately to the right of the caret will be contained in the attribute.
• If no characters exist to the right of the caret, an empty string will be set.
• When set to -1 the single character immediately to the left of the caret will be contained in the attribute.
• When set to -2 the next two characters immediately to the left of the caret will be contained in the attribute.
• When set to any negative number, that number of characters immediately to the left of the caret will be contained in the attribute.
• If no characters exist to the left of the caret, an empty string will be set.

offsetX

Default: 0
Type: Number

Adjust the caret position horizontal offset in pixels. Use positive or negative numbers.

offsetY

Default: 0
Type: Number

Adjust the caret position vertical offset in pixels. Use positive or negative numbers.

adjustHt

Default: 0
Type: Number

Adjust the caret height in pixels. Use positive or negative numbers.