问题描述:

I was attending an interview a few days ago and the company gave me an puzzle to solve using javascript, but I could not complete it.

You can show the code here..

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

网友答案:

You only need to remember last time and last button and compare them to know whether you should "increment" a character or not.

The actual increment will be easier if you also remember the last index, but you can also get it from the last character of previous text if you want to.

As for the long press, it may be the real test because the code provided does not give you enough to detect that. Ultimately you need a mousedown to determine whether a long press has happened.

$(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>
相关阅读:
Top