How do I partially hide an input field?

Need help
1

I have a text input field and I want to only show the first three characters as the user types and followed by asterisks *

It’s like a password input but the first three characters are visible

1 Like
2

if it’s just a visual thing you could achieve it with a little trickery

create a group
put 2 inputs in it
input 1 is disabled and shows the groups text truncated from end 3 characts (gets the last 3 characters). then use just add ********123 for the inputs initial value
when clicked reveal the input that they can edit and show a save button
when saved hide the editable input and show the hidden input

this would be fine if it isn’t sensitive information since the data still exists on the page and could be seen in console. if it’s sensitive information you’d want to think about securing it better

3

But the tricky part is replacing the input value with the exact number of asterisks. I’m having trouble with that.

4

Solution Summary

To create a text input field where the first three characters are visible and the rest are replaced by asterisks, matching the original text length, you can use a combination of text functions.

Detailed Steps

  1. Set Up the Input Field:
  • Drag an Input element onto your page.
  • Name it, for example, “Input Text”.
  1. Add a Dynamic Text Field:
  • Drag a Text element onto the page, which will be used to display the formatted value.
  • This text field should not be editable.
  1. Configure the Dynamic Text:
  • In the text field, insert the following dynamic expression:
    • First, get the first three characters: Input Text's Value:truncated to 3.
    • Then calculate the number of asterisks needed:
      • Use the :number of characters function to get the total length of the text.
      • Subtract 3 (the visible characters) to get the number of asterisks.
    • Construct the final string: Input Text's Value:truncated to 3 & repeat("*", Input Text's Value:number of characters - 3).
  • The repeat("*", n) function is a way to create a string of asterisks with length n.
  1. Update the Dynamic Text in Real-Time:
  • Ensure that the dynamic text field is set to update in real-time as the user types in the input field.
5

Quick Solution:

  1. Use the Input Mask plugin to format the input: Input Mask Plugin. This allows you to structure the input to show the first three characters followed by asterisks (e.g., abc***).

  2. For Data Privacy:

    • Add two fields in the database: Name (private) and Name (public).
    • Set privacy rules:
      • If Current User = This User, show Name (private).
      • For others, display only Name (public).

This ensures data remains secure while controlling visibility.

Let me know if you need further assistance setting this up!

About Us:
We’re If-dev, a Bubble agency specializing in app logic and optimization. Reach out for expert help:

:e-mail: support@if-dev.io | :link: LinkedIn | :globe_with_meridians: if-dev.io

Your success is our success, and we’d love to collaborate with you to make your vision a reality.