Question

在日期字段上使用占位符是不可能的，但我确实需要它。

我想要两个日期输入，每个输入文本“From”和“To”作为占位符。

Answer 1

我正在使用以下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" />

Answer 2

使用此输入属性事件

onfocus="(this.type='date')" onblur="(this.type='text')"

＆＃13;

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

＆＃13;

Answer 3

你可以在伪之前使用CSS。

.dateclass {
  width: 100%;
}

.dateclass.placeholderclass::before {
  width: 100%;
  content: attr(placeholder);
}

.dateclass.placeholderclass:hover::before {
  width: 0%;
  content: "";
}

<input
  type="date"
  placeholder="Please specify a date"
  onClick="$(this).removeClass('placeholderclass')"
  class="dateclass placeholderclass">

<强> FIDDLE

Answer 4

您可以这样做：

<input onfocus="(this.type='date')" class="js-form-control" placeholder="Enter Date">

Answer 5

HTML5日期输入字段实际上不支持占位符的属性。它将始终被浏览器忽略，至少根据当前规范。

As noted here

Answer 6

input[type="date"] DOMElement仅采用以下值：YYYY-MM-DD，可跳过任何其他格式或文字。

Live Demo

HTML

<input type="text" placeholder="bingo" />
<input type="date" placeholder="2013-01-25" />

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

Performance review

在这种情况下，使用2个input元素，Pure JavaScript为~40% ± 10% faster。

使用32个input元素，差异保持不变（Pure JS的速度提高约43％±10％）。

Answer 7

试试这个：

使用您想要的值为您的字段添加占位符属性，然后添加此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')); }
  });

我没有对无法占位符的字段进行测试，但您根本不需要更改代码中的任何内容。

另外，对于不支持占位符属性的浏览器，此代码也是一个很好的解决方案。

Answer 8

如前所述here，我已经使用了一些“：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网页浏览中运行良好。也许它可以帮到你。

Answer 9

正如我提到here

最初将字段类型设置为文本。

焦点将其更改为键入日期

Answer 10

我正在使用此CSS方法来模拟输入日期上的占位符。

唯一需要js的是setAttribute的值，如果使用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)" />

Answer 11

为此问题找到了最简单的方法-在HTML-input-tag中使用此语法

      <input type="text" id="my_element_id" placeholder="select a date" name="my_element_name" onfocus="(this.type='date')" />
      </div>

Answer 12

好的，这就是我所做的：

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

这是在给出值时删除占位符。

type family BoolItem a where
    BoolItem (BoolLike a) = BoolLike a
    BoolItem a = BoolLike a

class IsBool a where
  toBool :: a -> BoolItem a

instance IsBool (BoolLike a) where
  toBool = id

instance (BoolItem a ~ BoolLike a) => IsBool a where
  toBool = toBoolLike

在焦点上或.hasValue时，删除占位符及其边距。

Answer 13

使用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">

Answer 14

<强> CSS

＆＃13;

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

＆＃13;

<input type="date" required />

＆＃13;

如何在输入日期字段中模拟占位符功能？

14 个答案:

Live Demo

HTML

Pure JavaScript

Performance review