From 9b8436281a98ee442c8d06eb5ebabb4d564b3adb Mon Sep 17 00:00:00 2001 From: "Marc S. Brooks" Date: Sun, 3 Mar 2024 00:38:51 -0800 Subject: [PATCH] Support extended INPUT types Documented Supported types --- README.md | 33 ++++++++++++++++++++------------- src/webform-toolkit.js | 22 ++++++++++++++++++++-- 2 files changed, 40 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index d66b8f7..123d542 100644 --- a/README.md +++ b/README.md @@ -108,21 +108,28 @@ const container = document.getElementById('webform-toolkit'); const webformToolkit = new WebformToolkit(container, settings, callback); ``` +## Supported types + +[checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color), [date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date), [email](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email), [file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file), [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden), [number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity), [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), [range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text), [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea), [time](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time) + ## Field definitions -| Attribute | Description | Required | -|-------------|---------------------------------------------------------------------------------------------------|----------| -| id | Field ID value. | true | -| label | Field label value. | true | -| type | Supported types (`text`, `hidden`, `password`, `checkbox`, `radio`, `file`, `select`, `textarea`) | true | -| name | Form element name. | true | -| value | Default value. | false | -| maxlength | Input type maximum length. | false | -| filter | Validate form input using REGEX | false | -| description | Custom field description. | false | -| placeholder | Input field type placeholder text. | false | -| error | Custom error message (Required, if `filter` is defined) | false | -| required | Required field. | false | +| Attribute | Description | Required | +|-------------|---------------------------------------------------------|----------| +| id | Field ID value. | true | +| label | Field label value. | true | +| type | [Supported types](#supported-types) | true | +| name | Form element name. | true | +| value | Default value. | false | +| maxlength | Input maximum length ([password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password), [text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)) | false | +| max | Input number max ([number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity)) | false | +| min | Input number min ([number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity)) | false | +| step | Input number step ([range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)) | false | +| filter | Validate form input using REGEX | false | +| description | Custom field description. | false | +| placeholder | Input field type placeholder text. | false | +| error | Custom error message (Required, if `filter` is defined) | false | +| required | Required field. | false | ## Callback processing diff --git a/src/webform-toolkit.js b/src/webform-toolkit.js index dda6493..e564f8b 100644 --- a/src/webform-toolkit.js +++ b/src/webform-toolkit.js @@ -151,8 +151,15 @@ function WebformToolkit(container, settings, callback) { // Supported elements switch (config.type) { + case 'color': + case 'date': + case 'email': + case 'number': case 'password': + case 'quantity': + case 'range': case 'text': + case 'time': elm = createInputElm(config); break; @@ -269,11 +276,22 @@ function WebformToolkit(container, settings, callback) { input.setAttribute('value', config.value); } - if (config.maxlength) { + if (config?.maxlength + && (config.type === 'password' || config.type === 'text')) { input.setAttribute('maxlength', config.maxlength); } - if (config.placeholder) { + if (config?.max || config?.min || config?.step + && (config.type === 'number' || config.type === 'quantity')) { + input.setAttribute('max', config.max); + input.setAttribute('min', config.min); + + if (config.type === 'step') { + input.setAttribute('step', config.step); + } + } + + if (config?.placeholder) { input.setAttribute('placeholder', config.placeholder); }