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（ “＃事件”）; 我++; 返回; }

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/

帮我改进这个Javascript代码限制？

2 个答案: