Jquery Datepicker placeholder not showing after blur

Question

I have simple 2 text field. One is normal text and another i have used for datepicker. I want to clear placeholder onfocus and show again onblur this is following code i am using:

$('input,textarea').focus(function(){
    $(this).data('placeholder',$(this).attr('placeholder'))
    console.log($(this).data('placeholder'));
    $(this).attr('placeholder','');
});
$('input,textarea').blur(function(){
    console.log("adding "+$(this).data('placeholder'));
    $(this).attr('placeholder',$(this).data('placeholder'));
});

For normal text its working fine but for datepicker text field placeholder not coming after blur. Is there is any solution so that datepicker text field could behave like simple text field ?

Try with DEMO

Line 10: $(this).data('placeholder', $(this).attr('placeholder')); Semicolon missing — , Jul 16 '15 at 11:19
@PhilAndelhofs are you sure its just because of `;`? I don't think so :-( — Manwal, Jul 16 '15 at 11:20
Was just a comment on your thing, now looking for options.. A second — , Jul 16 '15 at 11:24
Read this http://stackoverflow.com/questions/4002234/do-we-need-semicolon-at-the-end @PhilAndelhofs — Manwal, Jul 16 '15 at 11:27
I know but thanks :D still looking for an easy fix, founded i think — , Jul 16 '15 at 11:29

score 1 · Accepted Answer · answered Jul 16 '15 at 11:30

Two focus events are triggered because of the datepicker. The second time it triggers it gets rid of the property placeholder. So just check for the property before storing in .data(). Something like this should do it

$('input,textarea').focus(function () {
    if ($(this).prop('placeholder')) {
        $(this).data('placeholder', $(this).prop('placeholder'))
        $(this).prop('placeholder', '');
    }
});
$('input,textarea').blur(function () {
    if (!$(this).prop('placeholder')) {
        $(this).prop('placeholder', $(this).data('placeholder'));
    }
});

Here is a demo http://jsfiddle.net/dhirajbodicherla/ndnxznn3/25/

Hmmm this is the solution i am looking for. – Manwal Jul 16 '15 at 11:51 — Manwal, Jul 16 '15 at 11:51

score 0 · Answer 2 · answered Jul 16 '15 at 11:27

0

You could put an exception in for the date picker, so that the placeholder doesn't get cleared down:

$('input:not(#thedate),textarea:not(#thedate)').focus(function(){

answered Jul 16 '15 at 11:27

Pabregez

11
2

Completely wrong i want datepicker placeholder to be cleared and should come back like normal text. – Manwal Jul 16 '15 at 11:28

Jquery Datepicker placeholder not showing after blur

2 Answers2