javascript - 使用 javascript 解决数字键盘难题

Question

几天前我参加面试，公司给了我一个使用 Javascript 解决的难题，但我无法完成。

您可以在此处查看代码:

$(document).ready(function(){
    $("#phone").find("button").mouseup(function(event){
        var button_pressed = $(event.currentTarget).data("value")
        $("#result").val(t9($("#result").val(),button_pressed))
    })
})
function t9(text,button_pressed){
    // Write your code here
    return text
}

#phone button{
    height: 50px;
    width: 75px;
}
#phone button span{
    display: block;
    margin-top: 5px;
    font-size: 10px;
}
#result{
    width: 225px;
    height: 25px;
    margin-left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="phone">
    <tr>
        <td colspan="3">
            <input type="text" id="result" />
        </td>
    </tr>
    <tr>
        <td>
            <button data-value="1" class="key">1
                <span>. , !</span>
            </button>
        </td>
        <td>
            <button data-value="2" class="key">2
                <span>a b c</span>
            </button>
        </td>
        <td>
            <button data-value="3" class="key">3
                <span>d e f</span>
            </button>
        </td>
    </tr>
    <tr>
        <td>
            <button data-value="4" class="key">4
                <span>g h i</span>
            </button>
        </td>
        <td>
            <button data-value="5" class="key">5
                <span>j k l</span>
            </button>
        </td>
        <td>
            <button data-value="6" class="key">6
                <span>m n o</span>
            </button>
        </td>
    </tr>
    <tr>
        <td><button data-value="7" class="key">7
            <span>p q r s</span>
            </button>
        </td>
        <td>
            <button data-value="8" class="key">8
                <span>t u v</span>
            </button>
        </td>
        <td>
            <button data-value="9" class="key">9
                <span>w x y z</span>
            </button>
        </td>
    </tr>
    <tr>
        <td><button data-value="*" class="key">*</button></td>
        <td><button data-value="0" class="key">0</button></td>
        <td><button data-value="#" class="key">#</button></td>
    </tr>
</table>

请运行代码片段

现在，
单击 2 -> 输出应该是 -> a
再次点击 2 -> 输出应该是 -> b
再次点击 2 -> 输出应该是 -> c

单击 3 -> 输出应为 -> c(+d) => cd
再次点击 3 -> 输出应该是 -> c(+e) => ce
2-3 秒后点击 3 -> 输出应该是 -> ce(+d) => ced

长按 1 -> 输出应该是 -> ced(+1) => ced1
长按 2 -> 输出应该是 -> ced1(+2) => ced12
长按 3 -> 输出应该是 -> ced12(+3) => ced123

最后当你..
单击 1 -> 输出应为 -> ced123(+".") => ced123.
再次单击 1 -> 输出应为 -> ced123(+",") => ced123,
再次点击 1 -> 输出应该是 -> ced123(+"!") => ced123!

我找不到这种与时间相关的程序的任何解决方案。如果您有足够的时间帮我解决这个问题，我将不胜感激。如果您有任何与此相关的指南或任何文档，请提供给我..

Answer 1

你只需要记住最后一次和最后一个按钮并比较它们就知道是否应该“增加”一个字符。

如果您还记得最后一个索引，则实际增量会更容易，但如果您愿意，也可以从前一个文本的最后一个字符中获取它。

至于长按，这可能是真正的测试，因为提供的代码不足以让您检测到这一点。最终你需要按下鼠标来确定是否发生了长按。

$(document).ready(function(){
    $("#phone").find("button").mouseup(function(event){
        var button_pressed = $(event.currentTarget).data("value");
        $("#result").val(t9($("#result").val(),button_pressed));
    }).mousedown( t9_down );
});

function t9(text,button_pressed){
    const { last_time, last_down, last_button } = t9, // Load states
        keys = [ '0', '.,!', 'abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz' ],
        long_press = 1000, // ms
        timeout = 2000; // ms
    let index = 0, // Which character?
        now = new Date().getTime(),
        candidates = keys[ button_pressed ] || button_pressed; // All characters
    // Handle complex buttons
    if ( candidates.length > 1 ) {
       if ( last_button === button_pressed && now - last_time <= timeout ) {
           // Quick click of same button
           const len = text.length - 1,
               last_char = text.charAt( len );
           index = ( candidates.indexOf( last_char ) + 1 ) % candidates.length;
           text = text.substr( 0, len );
       } else if ( now - last_down > long_press )
           // Long press
           now = candidates = button_pressed;
       // Save states
       Object.assign( t9, { last_time: now, last_down: 0, last_button: button_pressed } );
    }
    text += String( candidates )[ index ];
    return text;
}

function t9_down(event) {
    if ( ! ~~$(event.currentTarget).data("value") ) return;
    t9.last_down = new Date().getTime();
}

#phone button{
    height: 50px;
    width: 75px;
}
#phone button span{
    display: block;
    margin-top: 5px;
    font-size: 10px;
}
#result{
    width: 225px;
    height: 25px;
    margin-left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="phone">
  <tr>
    <td colspan="3">
      <input type="text" id="result" />
  <tr>
    <td><button data-value="1" class="key">1<span>. , !</span></button>
    <td><button data-value="2" class="key">2<span>a b c</span></button>
    <td><button data-value="3" class="key">3<span>d e f</span></button>
  <tr>
    <td><button data-value="4" class="key">4<span>g h i</span></button>
    <td><button data-value="5" class="key">5<span>j k l</span></button>
    <td><button data-value="6" class="key">6<span>m n o</span></button>
  <tr>
    <td><button data-value="7" class="key">7<span>p q r s</span></button>
    <td><button data-value="8" class="key">8<span>t u v</span></button>
    <td><button data-value="9" class="key">9<span>w x y z</span></button>
  <tr>
    <td><button data-value="*" class="key">*</button>
    <td><button data-value="0" class="key">0</button>
    <td><button data-value="#" class="key">#</button>
</table>