删除类型=日期的 html5 输入元素中存在的默认文本/占位符

Posted 2023-02-25

【中文标题】删除类型=日期的 html5 输入元素中存在的默认文本/占位符

【英文标题】：Remove default text/placeholder present in html5 input element of type=date

【发布时间】：2015-04-25 12:21:17

【问题描述】：

我正在使用类型为日期的 html 输入元素，

<input type="date">

当我使用上述元素时，它会在该输入元素中创建默认日期格式，即 mm/dd/yyyy 文本。如何删除此默认文本？

我尝试在我的页面上添加以下样式，但它也隐藏了选定的日期值，

input[type=date]::-webkit-datetime-edit-text 
    -webkit-appearance: none;
    display: none;

input[type=date]::-webkit-datetime-edit-month-field
    -webkit-appearance: none;
    display: none;

input[type=date]::-webkit-datetime-edit-day-field 
    -webkit-appearance: none;
    display: none;

input[type=date]::-webkit-datetime-edit-year-field 
    -webkit-appearance: none;
    display: none;

【问题讨论】：

您只针对 Webkit/Blink 用户代理？目前 Gecko 和 Trident 都不支持日期输入类型。

@TiesonT。感谢您的答复;我刚刚注意到 Trident 和 Gecko 不支持这一点。但是我现在正试图在 Blink(Chrome) 上运行它。有什么建议吗？

有人可以分享 2020 年的有效解决方案吗？

【参考方案1】：

这对我有用

var input = document.querySelectorAll(".date-input");

input.forEach(function(e)
  e.addEventListener("focusin",function(ev)
    e.type = 'date';
  )
);
input.forEach(function(e)
  e.addEventListener("focusout",function(ev)
    e.type = 'text';
  )
);

【参考方案2】：

这可能晚了，但这对我有用。

document.addEventListener('focusin',function(e)
  e.target.type = 'date';
);

document.addEventListener('focusout',function(e)
  e.target.type = '';
);

<input class="my-date" placeholder="Select Appointment Date"/>

【参考方案3】：

如果您只想隐藏 图标占位符（用于使用您自己的图标），这对于 type="date" 和 的输入就足够了在 Edge、Chrome 和 Firefox 中使用 type="time"：

::-webkit-calendar-picker-indicator 
   opacity: 0;
   cursor: pointer; /* optional */

【参考方案4】：

对于 Chrome

input[type='date']:in-range::-webkit-datetime-edit-year-field,input[type='date']:in-range::-webkit-datetime-edit-month-field,input[type='date']:in-range::-webkit-datetime-edit-day-field,input[type='date']:in-range::-webkit-datetime-edit-text  color: transparent;

【讨论】：

欢迎来到 Stack Overflow！如果您解释了它的工作原理/原因和/或为什么此解决方案比已经存在一段时间的现有答案更好，您的答案可能对其他人更有帮助:)

【参考方案5】：

datetime-local 也有类似的问题，这对我有用，也许有人可以使用它。文本输入比日期时间更容易设置样式

type='text' required='' onfocus="this.type='datetime-local'" onblur="if(this.value==='')this.type='text'"

【参考方案6】：

这对我来说很好用：

input[type=date]::-webkit-inner-spin-button,
  input[type=date]::-webkit-outer-spin-button 
    -webkit-appearance: none;
  

  input[type=date] 
    -moz-appearance: textfield;
  

【讨论】：

对我来说，这些都没有使占位符在 Chrome 79.0 和 Firefox 72.0 中消失

【参考方案7】：

<input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">

感谢阮海。

【参考方案8】：

这适用于 chrome，并且在设置时不会使值消失（版本 74）

input[value=""]::-webkit-datetime-edit color: transparent; 
input:focus::-webkit-datetime-edit color: #000; 

【参考方案9】：

从版本 73.0.3683.103 开始​​，这适用于我的 chrome

::-webkit-datetime-edit  color: transparent; 
:focus::-webkit-datetime-edit  color: #000; 

虽然我无法为 Edge 找到它，所以我将其更改为这个

input[type=date]  color: transparent !important;  
.active input[type=date]  color: inherit !important; 

这可能对你们中的一些人不利，但无论如何我都添加了活动类，因为我的标签悬停在输入字段上，直到被点击，然后我将它们向上移动。因此，为什么我需要在标签位于输入上方时不显示日期占位符

【参考方案10】：

只有在未设置值时才应该是透明的。

input[value="0000-00-00"]::-webkit-datetime-edit 
     color: transparent; 

【参考方案11】：

接受的答案似乎不再适用于最新的 chrome 版本。在 50.0.2661.102 版本上测试过，没有用。

通过添加这个来代替：

.mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit 
     color: transparent; 


input:focus::-webkit-datetime-edit 
    color: rgba(255, 255, 255, .46) !important; 

Working sample

Source

【讨论】：

这似乎使该值即使在设置时也会消失（chrome 54）

此答案在 win 10 pro 上的 chrome 60.0.3112.113 中有效，但它不仅会删除默认值，还会使设置的有效值在模糊时消失。

两个选择器可以一起工作吗？例如。如果 required 无效并且字段被禁用，则应用透明。

使值也消失

【参考方案12】：

可能的选择

HTML：

<input type='date' required>

CSS：

input[type=date]:required:invalid::-webkit-datetime-edit 
    color: transparent;

input[type=date]:focus::-webkit-datetime-edit 
    color: black !important;

【讨论】：

两个选择器可以一起工作吗？腿。如果 required 无效并且字段被禁用，则应用透明。

【参考方案13】：

实际上，您可以通过使用以下代码来利用 Chrome 生成的默认占位符。此代码也适用于从数据库中获取的日期：

<div class="Input">
    <script>
        function getDate() 
            var GET_DATE = document.getElementById("ThisElement").value="<?php echo $GetDateFrommysql = date('d/m/Y', strtotime($row_FetchedResults["MySQLColumnName"]));?>";
            return  GET_DATE;
        
    </script>

    <input class="form-control"
           style=" text-align: left; border: none;" 
           onfocus="(this.type='date')"  
           onblur="
               if(this.value==='')
                   this.type='text';
                   this.value='';
                   this.value= getDate();
               
               else
                   this.value;
               "                       
           id="ThisElement"  
           type = "text" 
           value = "<?php echo $GetDateFromMySQL = date('d/m/Y', strtotime($row_ActiveStudents["ChaseUpDate"]));?>"                
     />

【参考方案14】：

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) 
    color: transparent;

【讨论】：

@Steffi A. 谢谢你.. 你的建议很完美！

或其他答案<input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">

不适用于 chrome 51.0.2704.103、Mac OS El Capitan。 take.ms/P7SSK 有什么想法吗？

在 chrome 60.0.3112.113、Win 10 pro 中也不起作用。似乎此选择器已更改或删除。

@F***Schöner 正确，Chrome 不再支持伪元素上的任何类型的附加选择器。如果您的日期元素不受限制（无最小值/最大值），您可以使用：input[type="date"]:in-range::-webkit-datetime-edit-year-field, input[type="date"]:in-range::-webkit-datetime-edit-month-field, input[type="date"]:in-range::-webkit-datetime-edit-day-field, input[type="date"]:in-range::-webkit-datetime-edit-text color: transparent;