2012-11-07 112 views
6

在铬,标签等获得从输入HTML5 [类型=“日期”]输入值在铬

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

检查自己我的问题是:是否有可能从输入[type =“date”]在铬输入不是有效日期的文本?

回答

4

W3C Date State spec定义了消毒算法:

  • 值消毒算法如下:如果元素的值不是有效的日期字符串,然后将其设置为空字符串来代替。

每当设置输入元素的值被调用,如DOM input value spec定义:

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

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

IMO它是一件好事,它促进了表单验证,因为无效日期被视为虚假值(空字符串),它也让浏览器更自由地实现日期输入的UI。

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

+0

啊。鉴于我所看到的,具有足够的意义。我对Chrome实施的担忧是缺乏定制验证的能力;他们的基于文本框的实现为用户提供了输入他们喜欢的任何字符串的能力,但是除了检查val()===“”和alert之外,我无法协助。 – MaxPRafferty

+1

@MaxPRafferty我现在使用的是Chrome Canary(版本25),这个版本有一个非常坚固的验证,根本不允许输入无效的日期值(与当前的稳定版不同)。希望它很快就会在稳定版本中实现,其他浏览器希望能够继续。 '=]' –

4

正如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,并点击链接,你会看到一个错误信息。

享受它。