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

几天前，我参加了一次采访，该公司给我一个难题，以解决使用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！

对于这种与时间相关的程序，我找不到任何解决方案。如果您有足够的时间来帮助我解决问题，那么我将不胜感激。如果您有与此相关的任何准则或文档，请向我提供。

谢谢。

最佳答案

您只需要记住上次和最后一个按钮并进行比较即可知道是否应该“增加”一个字符。

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

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

$(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>

关于javascript - 使用JavaScript解决数字键盘难题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42199348/