Question

我是javascript世界的新手，甚至尝试谷歌搜索并没有真正帮助我找到我想要的东西。

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

RULE =一定不能点击！可以通过标签来完成！

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

E.g。事件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);
}

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

2 个答案: