javascript - HTML5 输入类型时间——选择或更改了哪一部分(小时或分钟)？

Question

在 HTML5 中，输入类型 time 提供由小时和分钟组成的时间的输入元素。

当单击小时部分时，它将被选中，通过单击增量箭头，我们可以增加值，分钟也是如此......

我们能否知道哪一部分(即小时或分钟)被选择或更改？

Answer 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.
    */
});

事实上，您还可以将其重构为一个实用函数，您可以在需要时调用该函数。