Input mask placeholder not behaving as expected


Topic: Input mask placeholder not behaving as expected

robbyirish asked 3 years ago

I updated the code and example below to the actual code I'm using, not just a barebones example.

Expected behavior:

when focusing on input field with placeholder but then unfocusing without providing input the placeholder should remain/return

Actual behavior:

Placeholder is replaced with mask placeholder

Resources (screenshots, code snippets etc.)

Here's the code I'm using and an example.

  <input 
     type="text" 
     id="workshopDate" 
     name="date" 
     class="form-control form-control-lg rounded-5" 
     data-mdb-input-mask="99/99/9999" 
     data-mdb-mask-placeholder="true" 
     data-mdb-char-placeholder="DD/MM/YYYY" 
     data-mdb-input-placeholder="false" 
     placeholder="e.g. 03/09/2021" 
     required
  >


Dawid Wajszczuk staff answered 3 years ago

Hi,

We will discuss this in our team and see what we can do about it. As for now, I will advise to use label for "e.g. 03/09/2021" instead of placeholder. You can see an example here https://mdbootstrap.com/docs/standard/plugins/input-mask/#section-mask-placeholder. Input mask has higher priority than provided placeholder, so it gets replaced after focus.

Keep coding,
Dawid


robbyirish commented 3 years ago

I'm wanting to use the standard placeholder style in this project as it fits better with the aesthetics of the project. Is there not a way to get the placeholder of input on focus and then on focus out if the value is empty to replace the input mask again with the placeholder?


Dawid Wajszczuk staff commented 3 years ago

You can try this JS code

const input = document.querySelector('#workshopDate')

input.addEventListener('focusout', (e)=>{
    e.target.placeholder = "e.g. 03/09/2021"
})

Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3339536#js-tab-view


robbyirish commented 3 years ago

Hi Dawid,

That requires to have an event listener for every input. I was looking for a 'one bullet' type of thing.

I did try the below before (getting and setting placeholder on focus and blur) but it doesn't seem to want to work. I think it has something to do with the fact that the placeholder is constantly being replaced with the input mask script?

var input_placeholder;
$("input[type=text]").on('focus', function(){
        input_placeholder = $(this).atr('placeholder');
});

$("input[type=text]").on('blur', function(){
    $(this).attr("placeholder", input_placeholder);
});

However I found a workaround that does work, I'd be very appreciative if you could have a look and let me know if you can think of a cleaner option but it basically involves getting the placeholder on focus, putting that inside a hidden div and then setting the placeholder to the text from the hidden div on focus out:

$("input[type=text]").on('focus', function(){
$('.test').html($(this).attr('placeholder'));
});
$("input[type=text]").on('blur', function(){
$(this).attr("placeholder", $('.test').text());
});

robbyirish commented 3 years ago

Nevermind... my 'one bullet' solution did work, I was spelling .attr wrong!

This gets the placeholder on focus, then sets it again on focus out:

var input_placeholder;
$("input[type=text]").on('focus', function(){
    input_placeholder = $(this).attr('placeholder');
});
$("input[type=text]").on('blur', function(){
    $(this).attr("placeholder", input_placeholder);
});

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: MacBook pro
  • Browser: safari, chrome
  • OS: Mac OS 11.6
  • Provided sample code: No
  • Provided link: No