Format textarea or text input

💬 App Building
4

Here's the solution from office hours (thank you for coming!) :slight_smile:

This should work for a phone number! Make sure to use a text input and not a number input as the "On Change" behavior is slightly different.

This should work for something like ####-####:

function formatNumber(value) {
  if (!value) return value;
  const newNumber = value.replace(/[^\d]/g, '');
  const newNumberLength = newNumber.length;
  if (newNumberLength <= 4) return newNumber;
  return ${newNumber.slice(0, 4)}-${newNumber.slice(4)};
}

textInput2.setValue(formatNumber(textInput2.value));
  1. Create a textInput component
  2. Add an event handler
  3. Set it to run on Change and "Run Script"
  4. Paste in the above code! (Make sure to replace both mentions of textInput2 at the last line with the name of your textInput component)
3 Likes