title: Creating JavaScript Phone Keypad with Alphabet for SMS
body: <p>I’m trying to create a virtual phone keypad with alphabet feature for SMS. This is what I’ve tried so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var button = document.querySelectorAll('button'),
      input = document.querySelector('input'),
      busy = true,
      hold,
      is_busy,
      delay = 1000,
      change = -1,
      click = null;
  for (var i = 0, len = button.length; i &lt; len; ++i) {
      button[i].onmousedown = function(e) {
          var text = this.getAttribute('data-text').split(""),
              number = this.getAttribute('data-number');
          busy = true;
          clearTimeout(is_busy);
          if (click !== e.target) {
              busy = false;
          }
          if (change &gt;= text.length - 1 || click !== e.target) {
              change = 0;
              click = e.target;
          } else {
              change = change + 1;
          }
          if (text[0] === '#') {
              input.value = input.value.slice(0, -1);
              hold = setTimeout(function() {
                  input.value = "";
              }, delay);
              return;
          }
          hold = setTimeout(function() {
              input.value = input.value.slice(0, -1) + number;
          }, delay);
          input.value = busy ? input.value.slice(0, -1) + text[change] : input.value + text[change];
      };
      button[i].onmouseup = function(e) {
          clearTimeout(hold);
          busy = true;
          is_busy = setTimeout(function() {
              change = -1;
              busy = false;
              e.target = null;
          }, delay);
          // put caret at the end of text input
          input.focus();
          input.selectionStart = input.selectionEnd = input.value.length;
      };
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;input type="text"&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;button data-text=".,?!'&amp;quot;1-()@/:_" data-number="1"&gt;1 &lt;small&gt;o_o&lt;/small&gt;&lt;/button&gt;
    &lt;button data-text="abc2" data-number="2"&gt;2 &lt;small&gt;abc&lt;/small&gt;&lt;/button&gt;
    &lt;button data-text="def3" data-number="3"&gt;3 &lt;small&gt;def&lt;/small&gt;&lt;/button&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;button data-text="ghi4" data-number="4"&gt;4 &lt;small&gt;ghi&lt;/small&gt;&lt;/button&gt;
    &lt;button data-text="jkl5" data-number="5"&gt;5 &lt;small&gt;jkl&lt;/small&gt;&lt;/button&gt;
    &lt;button data-text="mno6" data-number="6"&gt;6 &lt;small&gt;mno&lt;/small&gt;&lt;/button&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;button data-text="pqrs7" data-number="7"&gt;7 &lt;small&gt;pqrs&lt;/small&gt;&lt;/button&gt;
    &lt;button data-text="tuv8" data-number="8"&gt;8 &lt;small&gt;tuv&lt;/small&gt;&lt;/button&gt;
    &lt;button data-text="wxyz9" data-number="9"&gt;9 &lt;small&gt;wxyz&lt;/small&gt;&lt;/button&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;button data-text=" 0" data-number="0"&gt;0 &lt;small&gt;__&lt;/small&gt;&lt;/button&gt;
    &lt;button data-text="#"&gt;&amp;larr;&lt;/button&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The results are almost in line as I expected, just lacking a few minor things. The following are the requirements:</p>
  
  <ul>
  <li>Pressing the same button quickly will replace the last character without adding more characters. <strong>OK</strong></li>
  <li>Switch to another button will add new character. <strong>OK</strong></li>
  <li>Press and hold the button until <code>delay</code> will replace the last character to a number. <strong>OK</strong></li>
  <li>Pressing the same button quickly will replace the last character without adding more characters, wait until <code>delay</code>, then press again. It should add a new character at the end. <strong>NO</strong></li>
  </ul>
  
  <p>Thank’s for your help.</p>