未显示输入类型="日期"字段的占位符

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

单击时占位符消失

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}
input[type="date"]:focus:before {
  content: '' !important;
}

2023-02-13 15:01 回答

吾似梦蝴蝶_321

我最终使用了以下内容.

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}


<input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')">


                
                    2023-02-13 15:01  回答
                       手机用户2702938540


                        
                根据HTML标准:


  不得指定以下内容属性,并且不适用于该元素:accept,alt,checked,dirname,formaction,formenctype,formmethod,formnovalidate,formtarget,height,inputmode,maxlength,minlength,multiple,pattern,placeholder,size, src和宽度.

        
                
                    2023-02-13 15:01  回答
                       青椒盐水_205
                
            
                        
                这个对我有用:

input[type='date']:after {
  content: attr(placeholder)
}

        
                
                    2023-02-13 15:01  回答
                       zhaojiapin_313
                
            
                        
                我在我的CSS中用过这个:

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}


并将这样的somenthing放入javascript:

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


它适用于我的移动设备(Ios8和Android).但我使用jquery输入掩码用于桌面输入文本类型.如果您的代码在ie8上运行,这个解决方案是一个很好的方法.

        
                
                    2023-02-13 15:01  回答
                       倍儿傻的叶子奇太_900
                
            
                        
                根据deadproxor和Alessio的回答,我会尝试只使用CSS:

input[type="date"]::before{
    color: #999;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}


如果您需要在输入中写入内容后使占位符不可见,我们可以尝试使用:valid和:invalid选择器,如果您的输入是必需的.

编辑

如果您在输入中使用了以下代码:



input[type="date"]::before {
	color: #999999;
	content: attr(placeholder);
}
input[type="date"] {
	color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

<input type="date" placeholder="Date" required>


                
                    2023-02-13 15:02  回答
                       锋仔
                
            

                        
                这可能不合适......但它终于帮助了我.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date"> 

        
                
                    2023-02-13 15:02  回答
                       rebeccataolina_733
                
            
                        
                找到了解决问题的更好方法。我认为这会对您有所帮助。聚焦后，该框会将类型更改为文本，以便显示占位符。重点关注时，其类型会更改为日期，因此将显示日历视图。

<input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date"> 

        
                
                    2023-02-13 15:02  回答
                       awweyucw_529
                
            
                        
                我使用了这个jQuery:http:
 //jsfiddle.net/daviderussoabram/65w1qhLz/

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

        
                
                    2023-02-13 15:02  回答
                       happy可乐可爱多_376_874
                
            
                        
                如果您使用mvp的方法但添加onblur事件以将其更改回文本字段,以便在输入字段失去焦点时再次显示占位符文本.它只是使黑客更好一点.

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">


希望这可以帮助.

        
                
                    2023-02-13 15:02  回答
                       激越工作室