javascript 从 chrome 中的 HTML5 input[type="date"] 获取输入值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13278016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get input value from HTML5 input[type="date"] in chrome
提问by MaxPRafferty
In chrome, a tag like
在 chrome 中，像这样的标签
<input id="picker" type="date">
renders as a text field. However, calling trying to get its value with something like
呈现为文本字段。然而，调用试图用类似的东西来获取它的价值
$("#picker").val()
returns nothing until a valid date is entered or picked from it's dropdown. I took a look at all of the object's immediate properties on a keypress with
在输入或从下拉列表中选择有效日期之前，不返回任何内容。我在按键上查看了对象的所有直接属性
$("#picker").keypress(function() {
var output = ""
for (var i in this) {
output += i +" value:"+ this[i] + "\n";
}
alert(output);
});?
but couldn't see my input in any of these. Check for yourself at http://jsfiddle.net/5cN2q/
但在其中任何一个中都看不到我的输入。在http://jsfiddle.net/5cN2q/检查自己
My question is: Is it possible to get the text from a input[type="date"] in chrome when the input is not a valid date?
我的问题是：当输入不是有效日期时，是否可以从 chrome 中的 input[type="date"] 中获取文本？
采纳答案by Fabrício Matté
The W3C Date State specdefines the sanitization algorithm:
在W3C日期国家规范规定的卫生处理算法：
- The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
- 值清理算法如下：如果元素的值不是有效的日期字符串，则将其设置为空字符串。
Which is invoked whenever setting the value of the input element, as defined in DOM input value spec:
每当设置输入元素的值时都会调用它，如DOM 输入值规范中所定义：
- On getting, it must return the current value of the element. On setting, it must set the element's value to the new value, set the element's dirty value flag to true, invoke the value sanitization algorithm, if the element's type attribute's current state defines one, and then, if the element has a text entry cursor position, should move the text entry cursor position to the end of the text field, unselecting any selected text and resetting the selection direction to none.
- 在获取时，它必须返回元素的当前值。在设置时，它必须将元素的值设置为新值，将元素的脏值标志设置为真，调用值清理算法，如果元素的类型属性的当前状态定义了一个，然后，如果元素有一个文本输入光标位置，应将文本输入光标位置移动到文本字段的末尾，取消选择任何选定的文本并将选择方向重置为无。
So the valueproperty will always be an empty string when the date is not valid. There doesn't seem to be any property for "original/dirty/user-typed text value" specified as it is not a text input after all.
因此，value当日期无效时，该属性将始终为空字符串。似乎没有指定“原始/脏/用户输入的文本值”的任何属性，因为它毕竟不是文本输入。
IMO it is a good thing, it facilitates form validation as invalid dates are treated as falsy values (empty strings), it also leaves browsers to more freely implement the UI for date inputs.
IMO 这是一件好事，它促进了表单验证，因为无效日期被视为虚假值（空字符串），它还使浏览器可以更自由地实现日期输入的 UI。
If you prefer a non-W3C date input, you can use a text input with the good old JS date validation and a datepicker, such as the jQuery UI datepicker. This would allow you to retrieve the actual text value of the input and is a much more cross-browser solution as well.
如果您更喜欢非 W3C 日期输入，您可以使用带有旧 JS 日期验证和日期选择器的文本输入，例如jQuery UI datepicker。这将允许您检索输入的实际文本值，并且也是一种更跨浏览器的解决方案。
回答by lamusique
As the other answeryou can't see the original value, you can however handle validation with ValidityState
作为另一个答案，您看不到原始值，但是您可以使用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>
If you change the day to 30 and click the link, you'll see an error message.
如果您将日期更改为 30 并单击该链接，您将看到一条错误消息。
Enjoy it.
好好享受。
