Question

在chrome中，标签如

<input id="picker" type="date">

呈现为文本字段。但是，调用试图用

之类的东西来获得它的价值

$("#picker").val()

在输入有效日期或从其下拉列表中选择有效日期之前，不会返回任何内容。我用

查看了按键上所有对象的直接属性

$("#picker").keypress(function() {
    var output = ""
    for (var i in this) {       
        output += i +" value:"+ this[i] + "\n";
    }
    alert(output);
});

但无法看到我的输入。在http://jsfiddle.net/5cN2q/

查看您自己

我的问题是：当输入不是有效日期时，是否可以从chrome中输入[type =“date”]获取文本？

Answer 1

W3C Date State spec定义了清理算法：

值清理算法如下：如果元素的值不是有效的日期字符串，则将其设置为空字符串。

每当设置input元素的值时调用，如DOM input value spec：

中所定义

获取时，必须返回元素的当前值。在设置时，必须将元素的值设置为新值，设置   element的脏值标志为true，调用值清理   算法，如果元素的type属性的当前状态定义   一，然后，如果元素有一个文本输入光标位置，应该   将文本输入光标位置移动到文本字段的末尾，   取消选择任何选定的文本并将选择方向重置为   无。

因此，当日期无效时，value属性将始终为空字符串。似乎没有指定“原始/脏/用户类型文本值”的任何属性，因为它毕竟不是文本输入。

IMO这是一件好事，它有助于表单验证，因为无效日期被视为虚假值（空字符串），它还使浏览器更自由地实现日期输入的UI。

如果您更喜欢非W3C日期输入，则可以使用带有良好旧JS日期验证的文本输入和日期选择器，例如jQuery UI datepicker。这将允许您检索输入的实际文本值，并且是一个更加跨浏览器的解决方案。

Answer 2

作为the other answer，您无法看到原始值，但您可以使用ValidityState处理验证

<script type="text/javascript">
function submitform()
{
  var inputdate = document.getElementById("inputdate")
  // check if date is valid.
  // you can use `inputdate.validity.valid` too.
  if(inputdate.validity.badInput) {
    // error message from the browser
    document.getElementById("message").innerHTML = inputdate.validationMessage
  }
  //document.myform.submit();
}
</script>

<div>message: </div><div id="message" style="color: red; font-weight:bold;"></div>
<form method=post action="./post">
  <input type="date" id="inputdate" value="2016-02-29">
  <a href="javascript: submitform()">get date!</a>
</form>

如果您将日期更改为30并单击该链接，则会看到错误消息。

享受它。

从chrome中输入HTML5输入[type =“date”]的输入值

2 个答案: