HTML5输入类型时间 - 选择或更改了哪个部分(小时或分钟)?

时间:2014-06-19 06:22:34

标签: javascript jquery html5 input

在HTML5中,输入类型time为包含小时和分钟的时间提供输入元素。

当点击hour部分时,它将被选中并通过点击增量箭头我们可以增加值,同样分钟也是...

我们可以选择或更改哪个部分(即小时或分钟)?

1 个答案:

答案 0 :(得分:1)

正如@Paul在评论中指出的那样,onselect事件在这种情况下并不起作用。然而,您可以挂钩change事件并拆分HH和MM部分以找出哪一个被更改。

这些方面的东西:

演示:http://jsfiddle.net/AFdCC/

相关代码 :(非常粗糙,但会给你一个想法)

// handle change event on the element
$("#tm").on("change", function() {
    /*
        cache the default value of the element, 
        this is the value initially applied to the input.
    */
    var before = this.defaultValue;
    var after = this.value;  // current value i.e. changed value
    var partsBefore = before.split(":"); // make an array of old value
    var partsAfter = after.split(":"); // make an array of new value
    if (partsBefore[0] == partsAfter[0]) { // compare old and new value arrays
        if (partsBefore[1] == partsAfter[1]) {
             $("#result").text("Nothing changed"); // this will actually never fire
        } else {
            $("#result").text("Minutes changed");  
        }
    } else {
         $("#result").text("Hours changed");
    }
    this.defaultValue = after; // <-- This is important. 
    /*
        defaultValue holds only the value which was initially applied, 
        so it will always return the initial value. Hence, it is required to
        overwrite it here with the current value so that it could be compared on
        next change.
    */
});

事实上,您还可以将其重新分解为实用功能,您可以在需要时调用它。