Javascript时间助手？ -有趣的问题！

Question

我是 javascript 世界的新手，即使尝试 google 搜索也没有真正帮助我找到我要找的东西。

所以我来到这里希望你能指出我正确的方向。

RULE= 不能点击！可以通过tab来完成！

我有许多文本字段，用户将输入已记录的时间。

例如事件 1 发生在上午 11:31 事件 2 发生在上午 11:59

我希望通过将文本框设置为 24 小时格式的小时和秒格式，让用户尽可能轻松地完成此过程：

所以文本框值= 00:00，当用户选择文本框时，他们可以输入小时部分。然后会跳转到秒部分。

如果有什么可以做到这一点的任何想法，如果可以的话，你可以链接我。如果不能，你能给我一个关于编码的想法以及是否有更简单的替代方案。

我做了一些伪代码来帮助你理解我的实现目标：

for count = 0 , while count is less than 20, count++
{

create a texbox with name time+count, set the value to ="00:00"
}

when the user enters numbers they go into the hour segment until that is completed
the script then jumps the cursor to the minutes segment

if time+count+1 is lesser thatn time+count message user that time error "An event cannot occur before the previous event"

谢谢你听我说完！

Answer 1

我真的不知道有什么时间选择器可以满足您的需求，但这里有一个关于如何实现的基本概念：

• 您有两个文本框，或多对文本框
• 在每个文本框中，放置一个事件处理程序来处理“onkeyup”事件
• 在 onkeyup 处理程序中，检查框中文本的长度是否为 2
  • 如果长度为 2 -> 聚焦下一个文本框

这样用户可以简单地继续输入数字。

您可能需要在事件侦听器中添加一些额外的检查，例如以确保如果用户返回该字段，他们可以轻松编辑它（例如，如果他们按下 shift-tab，它不会聚焦不正确的领域）

如果您想要真正花哨，您可以多次使用单个文本框。然后，每次用户按下一个键时，您都会检查它是否是一个数字。如果用户首先键入两个数字，然后如果第三个键是数字，它将插入一个: 作为分隔符，依此类推。

Answer 2

这可能是一个开始。使用 jQuery 这不是一项痛苦的任务。

http://jsfiddle.net/sArjQ/

for(var i = 0; i < 20; i++) {
    var input = $("<input>", { name: 'time' + i, // create input element
                               val:  '00:00' });

    input.click(function() {

        $(this).prop({ selectionStart: 0, // move caret to beginning on click
                       selectionEnd:   0 });

    }).keydown(function() {

        var sel = $(this).prop('selectionStart'),
            val = $(this).val(),
            newsel = sel === 2 ? 3 : sel; // so that it moves two positions for :

        $(this).val(val.substring(0, newsel) // automatically set value
                    + val.substring(newsel + 1))

               .prop({ selectionStart: newsel, // move caret along
                       selectionEnd:   newsel });
    });

    $('body').append(input);
}