6

在 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 中的 input[type="date"] 获取文本？

4

2 回答 2

4

W3C 日期状态规范定义了清理算法：

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

每当设置输入元素的值时都会调用它，如DOM 输入值规范中所定义：

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

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

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

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

于 2012-11-07T21:08:17.293 回答
4

作为另一个答案，您看不到原始值，但是您可以使用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 并单击该链接，您将看到一条错误消息。

好好享受。

于 2014-06-06T12:01:56.403 回答