Volomeister Posted April 27 Report Share Posted April 27 Hi there! I needed to convert the number input into 123,456,789.00 format on the fly while a person types in. I was not able to find a default feature on Caspio, so I wrote this script that does the job. You can check the live version here: https://c7eku786.caspio.com/dp/7f80b000b3154265003240a4b07f Script itself below: <script> document.addEventListener('DataPageReady', _=> { document.querySelectorAll('.cbFormTextField').forEach( input => { input.addEventListener('input', e => { formatDecimals(e.target)}) input.addEventListener('blur', e => { formatDecimals(e.target, true)}) }) const formatNumber = n => { return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",") } const formatDecimals = (input, blurEvent) => { let inputValue = input.value; let caretPosition = input.selectionStart; let initialLength = input.value.length; if (inputValue === "") { return; } if(inputValue.indexOf('.') >-1) { let decimalPosition = inputValue.indexOf("."); let beforeDecimal = inputValue.substring(0, decimalPosition); let afterDecimal = inputValue.substring(decimalPosition); beforeDecimal = formatNumber(beforeDecimal); afterDecimal = formatNumber(afterDecimal); if (blurEvent) { afterDecimal+='00'; } afterDecimal = afterDecimal.substring(0,2); input.value = `${beforeDecimal}.${afterDecimal}`; } else { input.value = formatNumber(inputValue) if (blurEvent) { input.value+='.00'; } } let updatedLength = input.value.length; caretPosition = updatedLength - initialLength + caretPosition; input.setSelectionRange(caretPosition, caretPosition); } }) </script> If this script is being used as it is, it will convert all text inputs into the aforementioned format. If you need this functionality only for some particular input, say with name InsertRecordNumber_ (check the screenshot), you must substitute the next block of code: document.querySelectorAll('.cbFormTextField').forEach( input => { input.addEventListener('input', e => { formatDecimals(e.target)}) input.addEventListener('blur', e => { formatDecimals(e.target, true)}) }) with: let numberInput = document.querySelector('input[name="InsertRecordNumber_"]'); numberInput.addEventListener('input', e => {formatDecimals(e.target)}) numberInput.addEventListener('blur', e => {formatDecimals(e.target, true)}) Hope someone will find this helpful Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.