刪除缺省文本/佔位符存在於類型的HTML5輸入元件=日期

我使用的HTML輸入元件與類型如日期，刪除缺省文本/佔位符存在於類型的HTML5輸入元件=日期

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

來源

2015-02-24 Sreekanth

您是否只針對Webkit/Blink用戶代理？目前Gecko和Trident都不支持日期輸入類型。 – 2015-02-24 00:46:40

@TiesonT。感謝您的答覆;我只注意到Trident和Gecko不支持這一點。不過，我正試圖在Blink（Chrome）上運行它。有什麼建議麼？ – Sreekanth 2015-02-24 00:51:30

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

來源

2015-02-24 00:58:29

1+ ..不錯的一個。這裏是一個相應的例子 - http://jsfiddle.net/jmzhoocj/ – 2015-02-24 00:59:53

@Steffi答：謝謝你..你的建議作品完美！ – Sreekanth 2015-02-24 17:07:26

@JoshCrozier謝謝.. – Sreekanth 2015-02-24 17:08:29

接受的答案似乎並沒有在最新的Chrome版本的工作了。在版本50.0.2661.102上測試過，並沒有工作。

作品加入這個：

input::-webkit-datetime-edit{ color: transparent; } 

/* Include this to make it visible when input is clicked */ 
input:focus::-webkit-datetime-edit{ color: #000; }

Working sample

Source

來源

2016-07-07 10:12:43

這似乎使價值消失，即使設置（鉻54） – 2016-12-08 16:07:38

這個答案在鉻10.0親可以在60.0.3112.113工作，但它不只是刪除默認值，但也使一套，有效值在模糊時消失。 – 2017-09-08 07:26:31

可能的選項

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

來源

2017-03-21 23:01:01 Kenneth

其實你可以採取通過使用下面的代碼通過瀏覽器默認生成的佔位優勢。此代碼也適用於從數據庫中提取的日期：

<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"]));?>"     
    />

來源

2017-07-31 14:50:15

刪除缺省文本/佔位符存在於類型的HTML5輸入元件=日期

回答

相關問題