diff --git a/index.d.ts b/index.d.ts
index 58183d2..9954d65 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -81,6 +81,12 @@ declare namespace KioskBoard {
*/
capsLockActive?: boolean;
+ /**
+ * @property {boolean} - Optional, Uppercase or lowercase first character only. Uppercased when `true`.
+ * @defaultValue `true`
+ */
+ capsLockAuto?: boolean;
+
/**
* @property {boolean} - Optional, Allow or prevent real/physical keyboard usage. Prevented when `false`.
* @defaultValue `false`
diff --git a/src/kioskboard.css b/src/kioskboard.css
index 2b5295f..157e1d2 100644
--- a/src/kioskboard.css
+++ b/src/kioskboard.css
@@ -235,6 +235,10 @@
background: #5decaa;
}
+#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-capslock.capslock-auto::before {
+ background: #2329f6;
+}
+
#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-enter,
#KioskBoard-VirtualKeyboard .kioskboard-row-bottom span.kioskboard-key-backspace {
position: relative;
@@ -513,6 +517,14 @@
background: #5decaa;
}
+#KioskBoard-VirtualKeyboard.kioskboard-theme-oldschool span.kioskboard-key-capslock.capslock-auto::before,
+#KioskBoard-VirtualKeyboard.kioskboard-theme-flat span.kioskboard-key-capslock.capslock-auto::before,
+#KioskBoard-VirtualKeyboard.kioskboard-theme-light span.kioskboard-key-capslock.capslock-auto::before,
+#KioskBoard-VirtualKeyboard.kioskboard-theme-dark span.kioskboard-key-capslock.capslock-auto::before,
+#KioskBoard-VirtualKeyboard.kioskboard-theme-material span.kioskboard-key-capslock.capslock-auto::before {
+ background: #2329f6;
+}
+
#KioskBoard-VirtualKeyboard.kioskboard-theme-flat .kioskboard-row span[class^="kioskboard-key"] svg,
#KioskBoard-VirtualKeyboard.kioskboard-theme-light .kioskboard-row span[class^="kioskboard-key"] svg {
fill: #707070 !important;
diff --git a/src/kioskboard.js b/src/kioskboard.js
index a008a08..2030dc4 100644
--- a/src/kioskboard.js
+++ b/src/kioskboard.js
@@ -54,6 +54,7 @@
theme: 'light', // "light" || "dark" || "flat" || "material" || "oldschool"
autoScroll: true,
capsLockActive: true,
+ capsLockAuto: false,
allowRealKeyboard: false,
allowMobileKeyboard: false,
cssAnimations: true,
@@ -394,7 +395,8 @@
var fontWeight = typeof opt.keysFontWeight === 'string' && opt.keysFontWeight.length > 0 ? opt.keysFontWeight : 'normal';
// static keys: begin
- var isCapsLockActive = opt.capsLockActive === true;
+ var isCapsLockAuto = opt.capsLockAuto === true;
+ var isCapsLockActive = opt.capsLockActive === true || isCapsLockAuto;
var keysIconWidth = typeof opt.keysIconSize === 'string' && opt.keysIconSize.length > 0 ? opt.keysIconSize : '25px';
var keysIconColor = '#707070';
var keysAllowSpacebar = opt.keysAllowSpacebar === true;
@@ -403,7 +405,7 @@
var keysEnterText = typeof opt.keysEnterText === 'string' && opt.keysEnterText.length > 0 ? opt.keysEnterText : 'Enter';
var spaceKey = '' + keysSpacebarText + '';
- var capsLockKey = '' + kioskBoardIconCapslock(keysIconWidth, keysIconColor) + '';
+ var capsLockKey = '' + kioskBoardIconCapslock(keysIconWidth, keysIconColor) + '';
var backspaceKey = '' + kioskBoardIconBackspace(keysIconWidth, keysIconColor) + '';
var enterKey = '' + keysEnterText + '';
// static keys: end
@@ -643,6 +645,17 @@
keyValue = keyValue.toLocaleLowerCase(keyboardLanguage);
}
+ if (isCapsLockAuto) {
+ isCapsLockActive = false;
+ isCapsLockAuto = false;
+ kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase');
+ kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase');
+ var capsLockKeyElm = window.document.querySelector('.kioskboard-key-capslock');
+ if (capsLockKeyElm) {
+ capsLockKeyElm.classList.remove('capslock-auto');
+ }
+ }
+
var keyValArr = keyValue.split('');
for (var keyValIndex = 0; keyValIndex < keyValArr.length; keyValIndex++) {
// update the selectionStart
@@ -675,16 +688,24 @@
// focus the input
input.focus();
- if (e.currentTarget.classList.contains('capslock-active')) {
+ if (e.currentTarget.classList.contains('capslock-auto')) {
+ e.currentTarget.classList.remove('capslock-auto');
+ kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase');
+ kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase');
+ isCapsLockActive = false;
+ isCapsLockAuto = false;
+ } else if (e.currentTarget.classList.contains('capslock-active')) {
e.currentTarget.classList.remove('capslock-active');
kioskBoardVirtualKeyboard.classList.add('kioskboard-tolowercase');
kioskBoardVirtualKeyboard.classList.remove('kioskboard-touppercase');
isCapsLockActive = false;
+ isCapsLockAuto = false;
} else {
e.currentTarget.classList.add('capslock-active');
kioskBoardVirtualKeyboard.classList.remove('kioskboard-tolowercase');
kioskBoardVirtualKeyboard.classList.add('kioskboard-touppercase');
isCapsLockActive = true;
+ isCapsLockAuto = false;
}
});
}
@@ -727,11 +748,15 @@
keysEventListeners(specialCharacterKeyElm, function (e) {
e.preventDefault();
input.focus(); // focus the input
- if (e.currentTarget.classList.contains('specialcharacter-active')) {
+ if (e.currentTarget.classList.contains('specialcharacter-auto')) {
+ e.currentTarget.classList.remove('specialcharacter-auto');
+ e.currentTarget.classList.add('specialcharacter-active');
+ specialCharactersRowElm.classList.add('kioskboard-specialcharacter-show');
+ } else if (e.currentTarget.classList.contains('specialcharacter-active')) {
e.currentTarget.classList.remove('specialcharacter-active');
specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show');
} else {
- e.currentTarget.classList.add('specialcharacter-active');
+ e.currentTarget.classList.add('specialcharacter-auto');
specialCharactersRowElm.classList.add('kioskboard-specialcharacter-show');
}
});
@@ -743,6 +768,7 @@
e.preventDefault();
input.focus(); // focus the input
specialCharacterKeyElm.classList.remove('specialcharacter-active');
+ specialCharacterKeyElm.classList.remove('specialcharacter-auto');
specialCharactersRowElm.classList.remove('kioskboard-specialcharacter-show');
});
}