Topic: Dynamically show Placeholder - possible?

twoeyes priority asked 3 years ago

Expected behavior Is there a way that the placeholder in material-input is only shown when the user clicks or "activates" the control?

Actual behavior The placeholder is always visible in material-input.

Resources (screenshots, code snippets etc.)

Krzysztof Wilk staff answered 3 years ago


I modified your snippet. You can check it here:

If you don't want to use data-placeholder, just use placeholder. You can see an effect in a snippet above.

Hope this solution will meet your expectations :)

Best regards

twoeyes priority answered 3 years ago

Hi, thanks for your inspiration an the snippet!

Of course, it can handled by js! But I meant the placeholder not the label that should be shown on focus.

I modified your snippet a bit:

Maybe you have any idea how I can keep the original syntax of "placeholder" and not the "data" thing.

The only Problem is that I do not know how to return to default state of the control the focusout.

Thanks and best regards Roland

Krzysztof Wilk staff answered 3 years ago


It's not possible as default, but you can achieve it with custom js. I made one for you, so check out :)

Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: all
  • Browser: all
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No