在日期字段上使用占位符是不可能的，但我真的需要它。
我想要两个日期输入，每个输入都带有文本“From”和“To”作为占位符。
问问题
133462 次
14 回答
96
我正在使用以下 CSS 唯一技巧：
input[type="date"]:before {
content: attr(placeholder) !important;
color: #aaa;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
content: "";
}<input type="date" placeholder="Choose a Date" />于 2014-02-24T21:07:03.217 回答
33
使用此输入属性事件
onfocus="(this.type='date')" onblur="(this.type='text')"
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container mt-3">
<label for="date">Date : </label>
<input placeholder="Your Date" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
</div>于 2016-01-02T11:51:21.837 回答
15
您可以在伪之前使用 CSS。
.dateclass {
width: 100%;
}
.dateclass.placeholderclass::before {
width: 100%;
content: attr(placeholder);
}
.dateclass.placeholderclass:hover::before {
width: 0%;
content: "";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input
type="date"
placeholder="Please specify a date"
onClick="$(this).removeClass('placeholderclass')"
class="dateclass placeholderclass">于 2014-02-25T16:26:50.863 回答
14
你可以这样做：
<input onfocus="(this.type='date')" class="js-form-control" placeholder="Enter Date">
于 2015-12-08T00:38:53.023 回答
4
HTML5 日期输入字段实际上不支持占位符的属性。至少根据当前规范，浏览器将始终忽略它。
于 2013-11-27T20:20:08.280 回答
4
我正在使用这个 css 方法来模拟输入日期的占位符。
唯一需要 js 的就是设置值的属性，如果使用 React，它是开箱即用的。
input[type="date"] {
position: relative;
}
input[type="date"]:before {
content: attr(placeholder);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
color: rgba(0, 0, 0, 0.65);
pointer-events: none;
line-height: 1.5;
padding: 0 0.5rem;
}
input[type="date"]:focus:before,
input[type="date"]:not([value=""]):before
{
display: none;
}<input type="date" placeholder="Choose date" value="" onChange="this.setAttribute('value', this.value)" />于 2019-07-15T14:54:37.440 回答
3
input[type="date"]DOMElement 仅采用以下值：，YYYY-MM-DD任何其他格式或文本都将被跳过。
现场演示
HTML
<input type="text" placeholder="bingo" />
<input type="date" placeholder="2013-01-25" />
纯 JavaScript
window.onload = function () {
/* Grab all elements with a placeholder attribute */
var element = document.querySelectorAll('[placeholder]');
/* Loop through each found elements */
for (var i in element) {
/* If the element is a DOMElement and has the nodeName "INPUT" */
if (element[i].nodeType == 1 && element[i].nodeName == "INPUT") {
/* We change the value of the element to its placeholder attr value */
element[i].value = element[i].getAttribute('placeholder');
/* We change its color to a light gray */
element[i].style.color = "#777";
/* When the input is selected/clicked on */
element[i].onfocus = function (event) {
/* If the value within it is the placeholder, we clear it */
if (this.value == this.getAttribute('placeholder')) {
this.value = "";
/* Setting default text color */
this.style.color = "#000";
};
};
/* We the input is left */
element[i].onblur = function (event) {
/* If the field is empty, we set its value to the placeholder */
if (this.value == "") {
this.value = this.getAttribute('placeholder');
this.style.color = "#777";
}
};
}
}
}
性能评估
在这种确切的情况下，使用 2 个input元素，Pure JavaScript 的速度提高了 ~40% ± 10%。
对于 32 个input元素，差异保持不变（Pure JS 快了约 43% ± 10%）。
于 2013-08-09T12:45:12.670 回答
2
得到了解决这个问题最简单的方法——在你的 HTML-input-tag 中使用这个语法
<input type="text" id="my_element_id" placeholder="select a date" name="my_element_name" onfocus="(this.type='date')" />
</div>
于 2020-08-30T17:06:42.793 回答
0
试试这个：
使用您想要的值将占位符属性添加到您的字段，然后添加此 jQuery：
$('[placeholder]').each(function(){
$(this).val($(this).attr('placeholder'));
}).focus(function(){
if ($(this).val() == $(this).attr('placeholder')) { $(this).val(''); }
}).blur(function(){
if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); }
});
我没有针对不能使用占位符的字段对其进行测试，但您根本不需要更改代码中的任何内容。
另一方面，对于不支持占位符属性的浏览器，此代码也是一个很好的解决方案。
于 2013-08-09T12:18:24.920 回答
0
正如这里所提到的，我已经使它与一些“:before”伪类和一小部分javascript一起工作。这是想法：
#myInput:before{ content:"Date of birth"; width:100%; color:#AAA; }
#myInput:focus:before,
#myInput.not_empty:before{ content:none }
然后在 javascript 中，根据 onChange 和 onKeyUp 事件中的值添加“not_empty”类。
您甚至可以在每个日期字段上动态添加所有这些内容。检查我在另一个线程上的答案以获取代码。
它并不完美，但在 Chrome 和 iOS7 网络视图中运行良好。也许它可以帮助你。
于 2014-01-29T15:07:09.023 回答
0
于 2014-02-11T15:44:11.213 回答
-1
好的，这就是我所做的：
$(document).on('change','#birthday',function(){
if($('#birthday').val()!==''){
$('#birthday').addClass('hasValue');
}else{
$('#birthday').removeClass('hasValue');
}
})
这是在给定值时删除占位符。
input[type="date"]:before {
content: attr(placeholder) !important;
color: #5C5C5C;
margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"].hasValue:before {
content: "" !important;
margin-right: 0;
}
在焦点或 .hasValue 上，删除占位符及其边距。
于 2016-10-29T09:33:35.003 回答
-1
使用 jQuery（确保您可以使用 Vanilla 实现此目的。这确保日期格式仍然相同。
$(function() {
$('.sdate').on('focus', function() {
$(this).attr('type', 'date');
});
$('.sdate').on('blur', function() {
if(!$(this).val()) { // important
$(this).attr('type', 'text');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" class="sdate" placeholder="From">于 2018-09-18T06:42:10.690 回答
-3
CSS
input[type="date"] {position: relative;}
input[type="date"]:before {
position: absolute;left: 0px;top: 0px;
content: "Enter DOB";
color: #999;
width: 100%;line-height: 32px;
}
input[type="date"]:valid:before {display: none;}<input type="date" required />于 2016-03-02T05:58:07.147 回答