Question

我正在尝试构建自己的自定义日期时间选择器，因为我对现有的选择器过于挑剔。这实际上是我第一次尝试做这样的事情，所以仍然有一些我正在努力的错误。但是，在这种特殊情况下，我有点困惑。我在自动聚焦正确的输入字段时遇到问题。

所以我有3个输入字段：[小时]：[分钟]：[秒]

当用户在分钟或秒钟上退格时，它应该移动到左侧的字段并用＆＃34; 00＆＃34;填充旧的字段。那部分似乎工作正常。

当用户完成小时或分钟字段时，它应自动聚焦下一个输入。这部分表现得很奇怪。当你慢慢输入时，它工作正常。当您输入非常快时，它会完全跳过中间字段 - 即使您只键入两个字符。

单击日期字段，选择小时字段，然后快速键入两个数字。它会短暂地聚焦分钟，然后聚焦秒。再做一次，但慢慢打字。它将正确聚焦分钟字段。

如何防止此行为？

相关守则（第90行）：

const inputPositions = ['h','i','s']
const inputElements = [self.$hourInput, self.$minInput, self.$secInput]
let lastValue = false

self.$hourInput
    .add(self.$minInput)
    .add(self.$secInput)
    .on('focus', function() {
        const el = $(this)
        lastValue = el.val()
        el[0].select()
    })
    .on('keyup', function(e) {
        const el = $(this)
        const position = el.attr('position')
        const currentValue = el.val()
        const backspace = (e.keyCode == 8)
        let index = false

        if (!backspace) {
            if (currentValue.length == 2) {
                index = inputPositions.indexOf(position)

                if (index < 2) {
                    inputElements[index + 1][0].focus()
                }
            }
        } else {
            if (currentValue.length == 0 && lastValue.length == 0) {
                // focus last input and set val to 0
                index = inputPositions.indexOf(position)

                if (index > 0) {
                    // set current value to "00"
                    el.val("00")
                    // focus previous input
                    inputElements[index - 1][0].focus()
                }
            }
        }

        lastValue = currentValue
    })

使用on（＆＃39; keyup＆＃39;）巧妙地聚焦下一个输入

0 个答案: