Creating JavaScript Phone Keypad with Alphabet for SMS -

i’m trying create virtual phone keypad alphabet feature sms. i’ve tried far:

var button = document.queryselectorall('button'),      input = document.queryselector('input'),      busy = true,      hold,      is_busy,      delay = 1000,      change = -1,      click = null;  (var = 0, len = button.length; < 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 >= 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 @ end of text input          input.focus();          input.selectionstart = input.selectionend = input.value.length;      };  }

<p>    <input type="text">  </p>  <p>    <button data-text=".,?!'&quot;1-()@/:_" data-number="1">1 <small>o_o</small></button>    <button data-text="abc2" data-number="2">2 <small>abc</small></button>    <button data-text="def3" data-number="3">3 <small>def</small></button>  </p>  <p>    <button data-text="ghi4" data-number="4">4 <small>ghi</small></button>    <button data-text="jkl5" data-number="5">5 <small>jkl</small></button>    <button data-text="mno6" data-number="6">6 <small>mno</small></button>  </p>  <p>    <button data-text="pqrs7" data-number="7">7 <small>pqrs</small></button>    <button data-text="tuv8" data-number="8">8 <small>tuv</small></button>    <button data-text="wxyz9" data-number="9">9 <small>wxyz</small></button>  </p>  <p>    <button data-text=" 0" data-number="0">0 <small>__</small></button>    <button data-text="#">&larr;</button>  </p>

the results in line expected, lacking few minor things. following requirements:

• pressing same button replace last character without adding more characters. ok
• switch button add new character. ok
• press , hold button until delay replace last character number. ok
• pressing same button replace last character without adding more characters, wait until delay, press again. should add new character @ end. no

thank’s help.