Input mask placeholder not behaving as expected

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);
});