Cleaned up code. Added a new function to count spaces instead of the stupid split method. Added a new InputText function to help work with content editable elements.

ignite-html-input.js

@@ -2,10 +2,10 @@ import { IgniteTemplate } from "../ignite-html/ignite-template.js";
 
 /**
  * Forces an input to only allow digits for input.
- * @param {Number} max Max number of digits allowed to be inputed. Default is -1 which disables this feature.
+ * @param {Number} maxLength Max number of digits allowed to be inputed. Default is -1 which disables this feature.
  * @returns {IgniteTemplate} This ignite template.
  */
- IgniteTemplate.prototype.inputDigits = function(max = -1) {
+ IgniteTemplate.prototype.inputDigits = function(maxLength = -1) {
     this.on("keydown", e => {
         //If the input key isn't a digit, and it's not a backspace or escape or tab, ignore it.
         if ((e.key < '0' || e.key > '9') && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
@@ -13,7 +13,7 @@ import { IgniteTemplate } from "../ignite-html/ignite-template.js";
             return false;
         } else {
             //If we reached the max and the key isn't a special one then block this.
-            if (max != -1 && e.target.value.length >= max && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
+            if (maxLength != -1 && e.target.value.length >= maxLength && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
                 e.preventDefault();
                 return false;
             }
@@ -31,10 +31,10 @@ import { IgniteTemplate } from "../ignite-html/ignite-template.js";
 
 /**
  * Forces an input to only allow digits and periods for an input.
- * @param {Number} max Max number of digits allowed to be inputed. Default is -1 which disables this feature.
+ * @param {Number} maxLength Max number of digits allowed to be inputed. Default is -1 which disables this feature.
  * @returns {IgniteTemplate} This ignite template.
  */
-IgniteTemplate.prototype.inputNumber = function(max = -1) {
+IgniteTemplate.prototype.inputNumber = function(maxLength = -1) {
     this.on("keydown", e => {
         //If the input key isn't a digit, and it's not a backspace or escape or tab, ignore it.
         if ((e.key < '0' || e.key > '9') && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false && e.key != '.') {
@@ -42,7 +42,7 @@ IgniteTemplate.prototype.inputNumber = function(max = -1) {
             return false;
         } else {
             //If we reached the max and the key isn't a special one then block this.
-            if (max != -1 && e.target.value.length >= max && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
+            if (maxLength != -1 && e.target.value.length >= maxLength && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
                 e.preventDefault();
                 return false;
             }
@@ -60,12 +60,12 @@ IgniteTemplate.prototype.inputNumber = function(max = -1) {
 
 /**
  * Forces an input to only allow letters for input.
- * @param {Number} max Max number of letters allowed to be inputed. Default is -1 which disables this feature. 
+ * @param {Number} maxLength Max number of letters allowed to be inputed. Default is -1 which disables this feature. 
  * @param {Boolean} allowSpaces Whether or not to allow spaces to be entered. Default is true.
  * @param {Number} maxSpaces Max number of spaces allowed tp be inputed. Default is -1 which disables this feature. This only works if allowSpaces is true.
  * @returns {IgniteTemplate} This ignite template.
  */
- IgniteTemplate.prototype.inputLetters = function(max = -1, allowSpaces = true, maxSpaces = -1) {
+ IgniteTemplate.prototype.inputLetters = function(maxLength = -1, allowSpaces = true, maxSpaces = -1) {
     this.on("keydown", e => {
         //If the input key isn't a letter, and it's not a space, backspace or escape or tab, ignore it.
         if ((e.key < 'a' || e.key > 'z') && (e.key < 'A' || e.key > 'Z') && e.key != ' ' && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
@@ -73,7 +73,7 @@ IgniteTemplate.prototype.inputNumber = function(max = -1) {
             return false;
         } else {
             //If we reached the max and the key isn't a special one then block this.
-            if (max != -1 && e.target.value.length >= max && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
+            if (maxLength != -1 && e.target.value.length >= maxLength && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
                 e.preventDefault();
                 return false;
             }
@@ -84,7 +84,7 @@ IgniteTemplate.prototype.inputNumber = function(max = -1) {
                 return false;
             }
             //If the key is space and space is not allowed prevent it, or if it's allowed and we have too many spaces prevent it.
-            else if ((!allowSpaces && e.key == ' ') || (allowSpaces && e.key == ' ' && maxSpaces != -1 && e.target.value.split(' ').length > maxSpaces)) {
+            else if ((!allowSpaces && e.key == ' ') || (allowSpaces && e.key == ' ' && maxSpaces != -1 && countSpaces(e.target.value) >= maxSpaces)) {
                 e.preventDefault();
                 return false;
             }
@@ -95,11 +95,40 @@ IgniteTemplate.prototype.inputNumber = function(max = -1) {
 }
 
 /**
- * Forces an input to only allow email based characters for input.
+ * Limits an input to a max length or max number of spaces if wanted.
- * @param {Number} max Max number of letters allowed to be inputed. Default is -1 which disables this feature.
+ * @param {Number} maxLength Max number of letters allowed to be inputed. Default is -1 which disables this feature. 
+ * @param {Boolean} allowSpaces Whether or not to allow spaces to be entered. Default is true.
+ * @param {Number} maxSpaces Max number of spaces allowed tp be inputed. Default is -1 which disables this feature. This only works if allowSpaces is true.
  * @returns {IgniteTemplate} This ignite template.
  */
- IgniteTemplate.prototype.inputEmail = function(max = -1) {
+IgniteTemplate.prototype.inputText = function(maxLength = -1, allowSpaces = true, maxSpaces = -1) {
+    this.on("keydown", e => {
+        //If we reached the max and the key isn't a special one then block this.
+        if (maxLength != -1 && (e.target.value?.length >= maxLength || (e.target.isContentEditable && e.target.textContent.length >= maxLength)) && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
+            e.preventDefault();
+            return false;
+        }
+        //If the key is space and space is not allowed prevent it, or if it's allowed and we have too many spaces prevent it.
+        else if ((!allowSpaces && e.key == ' ') || (allowSpaces && e.key == ' ' && maxSpaces != -1 && countSpaces((e.target.isContentEditable ? e.target.textContent : e.target.value)) >= maxSpaces)) {
+            e.preventDefault();
+            return false;
+        }
+        //If the backspace key is pressed and this is content editable, clear the element
+        //otherwise a hidden <br/> may be added.
+        else if (e.key == "Backspace" && e.target.isContentEditable && e.target.textContent.length <= 1) {
+            e.target.innerHTML = null;
+        }
+    });
+
+    return this;
+}
+
+/**
+ * Forces an input to only allow email based characters for input.
+ * @param {Number} maxLength Max number of letters allowed to be inputed. Default is -1 which disables this feature.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+ IgniteTemplate.prototype.inputEmail = function(maxLength = -1) {
     this.on("keydown", e => {
         //If the input key isn't a letter, and it's not a space, backspace or escape or tab, ignore it.
         if ((e.key < 'a' || e.key > 'z') && (e.key < 'A' || e.key > 'Z') && (e.key < '0' || e.key > '9') && e.key != '@' && e.key != '.' && e.key != '-' && e.key != '_' && e.key != '+' && e.key != '~' && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
@@ -107,7 +136,7 @@ IgniteTemplate.prototype.inputNumber = function(max = -1) {
             return false;
         } else {
             //If we reached the max and the key isn't a special one then block this.
-            if (max != -1 && e.target.value.length >= max && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
+            if (maxLength != -1 && e.target.value.length >= maxLength && e.key != 'Backspace' && e.key != 'Escape' && e.key != 'Tab' && e.key != 'Control' && e.ctrlKey == false) {
                 e.preventDefault();
                 return false;
             }
@@ -122,3 +151,23 @@ IgniteTemplate.prototype.inputNumber = function(max = -1) {
 
     return this;
 }
+
+/**
+ * Counts the number of spaces in a string and returns the result.
+ * @param {String} str 
+ * @returns {Number} The number of spaces found.
+ */
+function countSpaces(str) {
+    if (!str) {
+        return 0;
+    }
+
+    var count = 0;
+    for (var i = 0; i < str.length; i++) {
+        if (str[i] == " ") {
+            count++;
+        }
+    }
+
+    return count;
+}