使用 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>

请运行代码 sn -p

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

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

longpress 1 -> 输出应该是 -> ced(+1) => ced1
longpress 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>