diff --git a/index.html b/index.html
index ece49e1..230d099 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="SimpleMoneyMask developed with pure JavaScript. To run on Client Side and Server Side."> <meta name="keywords" content="SimpleMaskMoney, MaskMoney, MaskJs, Mascara Javascript, Vanilla, Puro, Pure, Currency, Money, Mask, Dinheiro, Moeda, Mascara, Javascript, Hybrid-Mask, Node-Mask, Vanilla, ng-mask, v-mask"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="reply-to" content="codermarcos@gmail.com"> <meta name="language" content="en"> <meta name="author" content="codermarcos, codermarcos@gmail.com"> <meta name="robots" content="index,follow"> <meta name="revised" content="Thu, 20 Sep 2018 13:58:13 GMT"> <meta property="og:url" content="http://simple-mask-money.codermarcos.com/"> <meta property="og:title" content="SimpleMaskMoney - It's a simple money mask · codermarcos"> <meta name="og:description" content="SimpleMoneyMask developed with pure JavaScript. To run on Client Side and Server Side." /> <meta property="og:site_name" content="SimpleMaskMoney"> <meta property="og:type" content="website"> <meta property="og:locale" content="en_US"> <meta name="og:email" content="coder.marcos@gmail.com" /> <meta name="og:phone_number" content="+5511971353293" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="shortcut icon" type="image/png" href="https://avatars2.githubusercontent.com/u/12430365?s=40&v=4" /> <title>SimpleMaskMoney - It's a simple money mask · codermarcos</title> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-106429071-1', 'auto'); ga('send', 'pageview'); </script> <style> @import url("https://fonts.googleapis.com/css?family=Slabo+27px"); * { border: 0 none; color: #fff; font-family: "Slabo 27px", serif; margin: 0; padding: 0; text-align: center; } body { align-items: center; background-color: #222; display: flex; flex-direction: column; height: 100vh; } h1 { font-size: 3vw; } input#masked { background-color: transparent; color: red; font-size: 5vw; text-shadow: 0px 0px 0px #fff; text-align: center; outline: none; width: 80vw; -webkit-text-fill-color: transparent; } input#masked::-webkit-input-placeholder { text-shadow: none; -webkit-text-fill-color: initial; } label, button { cursor: pointer; } button { font-size: 1.3vw; text-transform: uppercase; background-color: transparent; margin: 1vw 0; } code, label, input, output, select { font-family: Consolas, monospace; line-height: 1.8vw; text-align: left; font-size: 1.3vw; } select option { color: #000; } select, input { background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } code input { min-width: 1vw; text-align: center; } code { background-color: #666; border-radius: 12px; padding: .8vw 2vw; } .hidden { visibility: hidden; } a { word-spacing: -0.188em; } svg { height: 3vw; margin: 0 1vw; } @media screen and (max-width: 1630px) { h1 { font-size: 3.8vw; } input#masked { font-size: 8vw; width: 95vw; } button { font-size: 2vw; } code, label, input, output, select { line-height: 2.5vw; font-size: 1.8vw; } code { padding: .8vw .8vw .8vw 2vw; } svg { height: 3.8vw; } } @media screen and (max-width: 1060px) { h1 { font-size: 5.8vw; } button { font-size: 3.5vw; } code, label, input, output, select { line-height: 3.8vw; font-size: 3vw; } svg { height: 5vw; } } @media screen and (max-width: 720px) { h1 { font-size: 10vw; } input#masked { font-size: 15vw; } code, label, input, output, select { line-height: 6.5vw; font-size: 5vw; } code { width: 80vw; } svg { height: 8vw; } } </style> </head> <body> <header> <h1>SimpleMaskMoney</h1> <a href="https://github.com/codermarcos/simple-mask-money" title="go to github" z-index="1"> <svg viewbox="0 0 438.549 438.549"> <title>Github</title> <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z" fill="#fff" /> </svg> </a> <a href="https://www.npmjs.com/package/simple-mask-money" title="go to npm" z-index="2"> <svg viewbox="0 0 900 315"> <title>Npm</title> <path d="M18 18v240h200v40h160v-40h360V18H18zm200 200h-40V98h-40v120H58V58h160v160zm200 0h-80v40h-80V58h160v160zm280 0h-40V98h-40v120h-40V98h-40v120h-80V58h240v160z" fill="#fff" /> </svg> </a> </header> <input id="masked" inputmode="numeric" title="mask working here" z-index="3"> <button type="button" z-index="4" title="copy the whole configuration as json">copy configuration</button> <code> { <br> &nbsp;&nbsp;afterFormat: (e) => {<br> &nbsp;&nbsp;&nbsp;&nbsp;console.log(e);<br> &nbsp;&nbsp;},<br> &nbsp; <label title="click to change the value" for="allowNegative" z-index="4"> allowNegative: <output>false</output>, <input class="hidden" type="checkbox" id="allowNegative"> </label><br> &nbsp;&nbsp;beforeFormat: (e) => {<br> &nbsp;&nbsp;&nbsp;&nbsp;console.log(e);<br> &nbsp;&nbsp;},<br> &nbsp; <label title="click to change the value" for="cursor" z-index="5"> cursor: <select id="cursor"> <option selected value="move">'move'</option> <option value="end">'end'</option> </select>, </label><br> &nbsp; <label title="type the decimal separator" for="decimalSeparator" z-index="6"> decimalSeparator: '<input type="text" id="decimalSeparator" value="," style="width: 1ch">', </label><br> &nbsp; <label title="click to change the value" for="fixed" z-index="7"> fixed: <output>false</output>, <input class="hidden" type="checkbox" id="fixed"> </label><br> &nbsp; <label title="type a fraction digits" for="fractionDigits" z-index="8"> fractionDigits: '<input type="number" inputmode="numeric" id="fractionDigits" value="2" style="width: 1ch">', </label><br> &nbsp; <label title="click to change the value" for="negativeSignAfter" z-index="9"> negativeSignAfter: <output>false</output>, <input class="hidden" type="checkbox" id="negativeSignAfter"> </label><br> &nbsp; <label title="type a prefix" for="prefix" z-index="10"> prefix: '<input type="text" id="prefix" style="width: 0ch">', </label><br> &nbsp; <label title="type a suffix" for="suffix" z-index="11"> suffix: '<input type="text" id="suffix" style="width: 0ch">', </label><br> &nbsp; <label title="type a thousands separator" for="thousandsSeparator" z-index="12"> thousandsSeparator: '<input type="text" id="thousandsSeparator" value="." style="width: 1ch">', </label><br> } </code> <script src="https://cdn.jsdelivr.net/npm/simple-mask-money@4.1.3/lib/set-mask.umd.min.js"></script> <script> const d = document; const l = 'addEventListener'; const qs = args => d.querySelector(args); const qsa = args => d.querySelectorAll(args); const input = qs('input#masked') , button = qs('button') , code = qs('#code'); let remove; let options = { afterFormat: (e) => { console.log(e); }, allowNegative: false, beforeFormat: (e) => { console.log(e); }, cursor: 'move', decimalSeparator: ',', fixed: false, fractionDigits: 2, negativeSignAfter: false, prefix: '', suffix: '', thousandsSeparator: '.', }; const applyMask = (focus = true) => { if (remove) remove(); remove = SimpleMaskMoney(input, options); if (focus) input.focus(); }; const inputsTextOrNumber = qsa('label>input[type="text"],label>input[type="number"]'); inputsTextOrNumber.forEach(input => { input[l]('input', (e) => { input.style.width = `${input.value.length}ch`; options[input.id] = e.target.type === 'number' ? parseInt(e.target.value) : e.target.value; applyMask(false); }); }); const inputsNumber = qsa('label > input[type="number"]'); inputsNumber.forEach(input => { input[l]('keydown', (e) => { if (!e.key.match(/[0-9]/g) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return e.preventDefault(); }); }); const inputsCheckbox = qsa('input[type="checkbox"]'); inputsCheckbox.forEach((input) => { input[l]('change', (e) => { input.previousElementSibling.textContent = e.target.checked ? 'true' : 'false'; options[input.id] = e.target.checked; applyMask(); }); }); const selects = qsa('select'); selects.forEach(select => { select[l]('change', (e) => { options[select.id] = e.target.value; applyMask(); }); }); applyMask(); function copy(text) { if (!navigator.clipboard) { const _t = d.createElement('textarea'); _t.value = text; _t.style.top = '0'; _t.style.left = '0'; _t.style.position = 'fixed'; d.body.appendChild(_t); _t.focus(); _t.select(); try { const successful = d.execCommand('copy'); console.log(successful ? 'successful' : 'unsuccessful'); } catch (e) { console.error('fail', e); }; d.body.removeChild(_t); return; } navigator.clipboard.writeText(text).then(() => console.log('successful'), (e) => console.error('unsuccessful', e)); } button[l]('click', () => copy(JSON.stringify(options, undefined, 2))); </script> </body> </html>
\ No newline at end of file
+<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="SimpleMoneyMask developed with pure JavaScript. To run on Client Side and Server Side."> <meta name="keywords" content="SimpleMaskMoney, MaskMoney, MaskJs, Mascara Javascript, Vanilla, Puro, Pure, Currency, Money, Mask, Dinheiro, Moeda, Mascara, Javascript, Hybrid-Mask, Node-Mask, Vanilla, ng-mask, v-mask"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="reply-to" content="codermarcos@gmail.com"> <meta name="language" content="en"> <meta name="author" content="codermarcos, codermarcos@gmail.com"> <meta name="robots" content="index,follow"> <meta name="revised" content="Thu, 20 Sep 2018 13:58:13 GMT"> <meta property="og:url" content="http://simple-mask-money.codermarcos.com/"> <meta property="og:title" content="SimpleMaskMoney - It's a simple money mask · codermarcos"> <meta name="og:description" content="SimpleMoneyMask developed with pure JavaScript. To run on Client Side and Server Side." /> <meta property="og:site_name" content="SimpleMaskMoney"> <meta property="og:type" content="website"> <meta property="og:locale" content="en_US"> <meta name="og:email" content="coder.marcos@gmail.com" /> <meta name="og:phone_number" content="+5511971353293" /> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="shortcut icon" type="image/png" href="https://avatars2.githubusercontent.com/u/12430365?s=40&v=4" /> <title>SimpleMaskMoney - It's a simple money mask · codermarcos</title> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-106429071-1', 'auto'); ga('send', 'pageview'); </script> <style> @import url("https://fonts.googleapis.com/css?family=Slabo+27px"); * { border: 0 none; color: #fff; font-family: "Slabo 27px", serif; margin: 0; padding: 0; text-align: center; } body { align-items: center; background-color: #222; display: flex; flex-direction: column; height: 100vh; } h1 { font-size: 3vw; } input#masked { background-color: transparent; color: red; font-size: 5vw; text-shadow: 0px 0px 0px #fff; text-align: center; outline: none; width: 80vw; -webkit-text-fill-color: transparent; } input#masked::-webkit-input-placeholder { text-shadow: none; -webkit-text-fill-color: initial; } label, button { cursor: pointer; } button { font-size: 1.3vw; text-transform: uppercase; background-color: transparent; margin: 1vw 0; } code, label, input, output, select { font-family: Consolas, monospace; line-height: 1.8vw; text-align: left; font-size: 1.3vw; } select option { color: #000; } select, input { background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } code input { min-width: 1vw; text-align: center; } code { background-color: #666; border-radius: 12px; padding: .8vw 2vw; } .hidden { visibility: hidden; } a { word-spacing: -0.188em; } svg { height: 3vw; margin: 0 1vw; } @media screen and (max-width: 1630px) { h1 { font-size: 3.8vw; } input#masked { font-size: 8vw; width: 95vw; } button { font-size: 2vw; } code, label, input, output, select { line-height: 2.5vw; font-size: 1.8vw; } code { padding: .8vw .8vw .8vw 2vw; } svg { height: 3.8vw; } } @media screen and (max-width: 1060px) { h1 { font-size: 5.8vw; } button { font-size: 3.5vw; } code, label, input, output, select { line-height: 3.8vw; font-size: 3vw; } svg { height: 5vw; } } @media screen and (max-width: 720px) { h1 { font-size: 10vw; } input#masked { font-size: 15vw; } code, label, input, output, select { line-height: 6.5vw; font-size: 5vw; } code { width: 80vw; } svg { height: 8vw; } } </style> </head> <body> <header> <h1>SimpleMaskMoney</h1> <a href="https://github.com/codermarcos/simple-mask-money" title="go to github" z-index="1"> <svg viewbox="0 0 438.549 438.549"> <title>Github</title> <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z" fill="#fff" /> </svg> </a> <a href="https://www.npmjs.com/package/simple-mask-money" title="go to npm" z-index="2"> <svg viewbox="0 0 900 315"> <title>Npm</title> <path d="M18 18v240h200v40h160v-40h360V18H18zm200 200h-40V98h-40v120H58V58h160v160zm200 0h-80v40h-80V58h160v160zm280 0h-40V98h-40v120h-40V98h-40v120h-80V58h240v160z" fill="#fff" /> </svg> </a> </header> <input id="masked" inputmode="numeric" title="mask working here" z-index="3"> <button type="button" z-index="4" title="copy the whole configuration as json">copy configuration</button> <code> { <br> &nbsp;&nbsp;afterFormat: (e) => {<br> &nbsp;&nbsp;&nbsp;&nbsp;console.log(e);<br> &nbsp;&nbsp;},<br> &nbsp; <label title="click to change the value" for="allowNegative" z-index="4"> allowNegative: <output>false</output>, <input class="hidden" type="checkbox" id="allowNegative"> </label><br> &nbsp;&nbsp;beforeFormat: (e) => {<br> &nbsp;&nbsp;&nbsp;&nbsp;console.log(e);<br> &nbsp;&nbsp;},<br> &nbsp; <label title="click to change the value" for="cursor" z-index="5"> cursor: <select id="cursor"> <option selected value="move">'move'</option> <option value="end">'end'</option> </select>, </label><br> &nbsp; <label title="type the decimal separator" for="decimalSeparator" z-index="6"> decimalSeparator: '<input type="text" id="decimalSeparator" value="," style="width: 1ch">', </label><br> &nbsp; <label title="click to change the value" for="fixed" z-index="7"> fixed: <output>false</output>, <input class="hidden" type="checkbox" id="fixed"> </label><br> &nbsp; <label title="type a fraction digits" for="fractionDigits" z-index="8"> fractionDigits: <input type="number" inputmode="numeric" id="fractionDigits" value="2" style="width: 1ch">, </label><br> &nbsp; <label title="click to change the value" for="negativeSignAfter" z-index="9"> negativeSignAfter: <output>false</output>, <input class="hidden" type="checkbox" id="negativeSignAfter"> </label><br> &nbsp; <label title="type a prefix" for="prefix" z-index="10"> prefix: '<input type="text" id="prefix" style="width: 0ch">', </label><br> &nbsp; <label title="type a suffix" for="suffix" z-index="11"> suffix: '<input type="text" id="suffix" style="width: 0ch">', </label><br> &nbsp; <label title="type a thousands separator" for="thousandsSeparator" z-index="12"> thousandsSeparator: '<input type="text" id="thousandsSeparator" value="." style="width: 1ch">', </label><br> } </code> <script src="https://cdn.jsdelivr.net/npm/simple-mask-money@4.1.3/lib/set-mask.umd.min.js"></script> <script> const d = document; const l = 'addEventListener'; const qs = args => d.querySelector(args); const qsa = args => d.querySelectorAll(args); const input = qs('input#masked') , button = qs('button') , code = qs('#code'); let remove; let options = { afterFormat: (e) => { console.log(e); }, allowNegative: false, beforeFormat: (e) => { console.log(e); }, cursor: 'move', decimalSeparator: ',', fixed: false, fractionDigits: 2, negativeSignAfter: false, prefix: '', suffix: '', thousandsSeparator: '.', }; const applyMask = (focus = true) => { if (remove) remove(); remove = SimpleMaskMoney(input, options); if (focus) input.focus(); }; const inputsTextOrNumber = qsa('label>input[type="text"],label>input[type="number"]'); inputsTextOrNumber.forEach(input => { input[l]('input', (e) => { input.style.width = `${input.value.length}ch`; options[input.id] = e.target.type === 'number' ? parseInt(e.target.value) : e.target.value; applyMask(false); }); }); const inputsNumber = qsa('label > input[type="number"]'); inputsNumber.forEach(input => { input[l]('keydown', (e) => { if (!e.key.match(/[0-9]/g) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return e.preventDefault(); }); }); const inputsCheckbox = qsa('input[type="checkbox"]'); inputsCheckbox.forEach((input) => { input[l]('change', (e) => { input.previousElementSibling.textContent = e.target.checked ? 'true' : 'false'; options[input.id] = e.target.checked; applyMask(); }); }); const selects = qsa('select'); selects.forEach(select => { select[l]('change', (e) => { options[select.id] = e.target.value; applyMask(); }); }); applyMask(); function copy(text) { if (!navigator.clipboard) { const _t = d.createElement('textarea'); _t.value = text; _t.style.top = '0'; _t.style.left = '0'; _t.style.position = 'fixed'; d.body.appendChild(_t); _t.focus(); _t.select(); try { const successful = d.execCommand('copy'); console.log(successful ? 'successful' : 'unsuccessful'); } catch (e) { console.error('fail', e); }; d.body.removeChild(_t); return; } navigator.clipboard.writeText(text).then(() => console.log('successful'), (e) => console.error('unsuccessful', e)); } button[l]('click', () => copy(JSON.stringify(options, undefined, 2))); </script> </body> </html>
\ No newline at end of file
diff --git a/source.index.html b/source.index.html
index aa6957b..4579692 100644
--- a/source.index.html
+++ b/source.index.html
@@ -282,7 +282,7 @@ <h1>SimpleMaskMoney</h1>
     </label><br>
     &nbsp;
     <label title="type a fraction digits" for="fractionDigits" z-index="8">
-      fractionDigits: '<input type="number" inputmode="numeric" id="fractionDigits" value="2" style="width: 1ch">',
+      fractionDigits: <input type="number" inputmode="numeric" id="fractionDigits" value="2" style="width: 1ch">,
     </label><br>
     &nbsp;
     <label title="click to change the value" for="negativeSignAfter" z-index="9">
