Input type date solves the problem of mobile terminal display placeholder, inputplaceholder

Input type date solves the problem of mobile terminal display placeholder, inputplaceholder

 

In a recent project, a new tag attribute of html5 is used. When type = "date" is used, it is found that the placeholder attribute is invalid and cannot be used.

If this is the case, the customer experience is unimaginable.

Finally, I thought about how to fix it with css + js double insurance.

Method 1:

Css:

Input [type = "date"]: before {content: attr (placeholder); // force the placeholder attribute color: # aaa; // This gray color should be the most suitable}

This step does not work, because after the input box has a value, the placeholder still cannot be hidden.

Now js is on the stage.

<Input type = "date" name = "birthday" id = "birthday" class = "txt1" datatype = "*" nullmsg = "set the date of birth! "Placeholder =" Please set the date of birth! "Onfocus =" this. removeAttribute ('placeholder ') ">

Method 2:

Css:

input[type="date"]:before{    color:#A9A9A9;    content:attr(placeholder);}input[type="date"].full:before {    color:black;    content:""!important;}

Js:

$("#date").on("input",function(){   if($(this).val().length>0){   $(this).addClass("full");}else{  $(this).removeClass("full");  } });

Html:

<Input id = "date" class = "weui_input" type = "date" placeholder = "select the date of Birth" style = "height: 41px; overflow: hidden;">

If the input height is not set, both placeholder and date will be displayed and two rows will be displayed under Android. You can solve this problem by adding overflow to the height limit.