帮我改善这个 Javascript 代码限制吗？

Question

这个使用 jQuery 函数的 Javascript 非常方便，但在获取反馈时存在一些限制，我希望你们能帮助我克服这些限制。

该函数基本上创建一个带有格式化时间 (HH:MM:SS) 的文本框，以便用户可以轻松输入时间，而不必使用涉及大量点击的日期时间选择器。

Code:

//global variable for keeping count on how many times the function is called 
var i = 0;

//for adding formatted time fields
function timemaker()
{

 //creates an input field of text type formatted with a value of "00:00:00"
 var input = $("<input>", 
    {
        name: 'time'+i, // e.g. time0, time1, time2, time3
        value: '00:00:00',
        maxlength: '8',
        size: '6'
    });

    //this function which uses jquery plugin causes the cursor in the field to goto position zero
    //when selected making it easier for the user to enter times and not need to select the correct position
    input.click(function() 
    {

        $(this).prop({
            selectionStart: 0,
            selectionEnd: 0
        });

        //this child function moves the cursor along the text field
        //when it reaches the first ":" it jumps to the next "00"
        }).keydown(function() {

    if (event.keyCode == 9) 
    { 
        return; 
    }

    else
    {
                var sel = $(this).prop('selectionStart'),
                val = $(this).val(),
                newsel = sel === 2 ? 3: sel;
                newsel = sel === 5 ? 6: newsel;

            $(this).val(val.substring(0, newsel) + val.substring(newsel + 1))

            .prop({
                selectionStart: newsel,
                selectionEnd: newsel
            });
    }
});

//this appends the text field to a divved area of the page

input.appendTo("#events"); 我++; 返回; }

00:00:00

我需要帮助的限制

• 例如，您想输入 12:45:00 的时间，您 显然不需要输入秒部分（最后一个“00”），因为它们 已经在那里了。因此，您决定从该文本字段中跳出 但是 javascript 将您的“Tab”按键解释为一个条目并且 从字段中删除零，导致值类似于 12:45:0
• 不验证 24 小时格式的输入 - 您认为会是这样 可以这样做吗？例如，您输入的第一个数字是“2”，因此 您仅有的选项是“0,1,2,3”
• 如果您在第 4 位数字中犯了错误并重新选择文本字段 您必须再次输入所有内容。

Answer 1

我认为您缺少的主要功能是 jQuery 在 keydown 事件处理程序中传递给您的参数，它可以让您实现所有这些要求。因此，将该行更改为：

.keydown(function(event){
    if (event.keyCode == 9) { return; }

    ... the rest of your code ...

然后您可以使用 event.keyCode 来识别按下的内容并采取相应的操作。例如，如果 event.keyCode == 9 那么用户按下了 TAB 键。

Answer 2

这是一个稍微开箱即用的解决方案，但如果过滤后的文本框无法正常工作，您可能会考虑使用它：

http://jsfiddle.net/YLcYS/4/