Creating JavaScript Phone Keypad with Alphabet for SMS

Taufik Nurrohman Published at Dev

Taufik Nurrohman

I’m trying to create a virtual phone keypad with alphabet feature for SMS. This is what I’ve tried so far:

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 < 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 at the 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 are almost in line as I expected, just lacking a few minor things. The following are the requirements:

Pressing the same button quickly will replace the last character without adding more characters. OK
Switch to another button will add new character. OK
Press and hold the button until delay will replace the last character to a number. OK
Pressing the same button quickly will replace the last character without adding more characters, wait until delay, then press again. It should add a new character at the end. NO

Thank’s for your help.

emperorJS91

I create a keypad as well, you can take some suggestion from it. I did not use the setTimeOut function but I opt-in for a onmouseleave eventListner, so when you leave the div, the last letter that you choise will appear on the display. Also I did not include the numbers yet...still to add stuff, but I hope it will help.

let numbers = new Array(11);
numbers[0] = "1";
numbers[1] = "2";
numbers[2] = "3";
numbers[3] = "4";
numbers[4] = "5";
numbers[5] = "6";
numbers[6] = "7";
numbers[7] = "8";
numbers[8] = "9";
numbers[9] = "*";
numbers[10] = "0";
numbers[11] = "#";

let letter = new Array(11);
letter[0] = "o_o";
letter[1] = "abc";
letter[2] = "def";
letter[3] = "ghi";
letter[4] = "jkl";
letter[5] = "mno";
letter[6] = "pqrs";
letter[7] = "tuv";
letter[8] = "wxyz";
letter[9] = "+";
letter[10] = "_";
letter[11] = "&#8593;";


let text = "";
let counter = 0;
let clicked = false;

// function to create the 12 div ( keypad buttons ). In the div I put the onclick function run() and I assign them a class and Id to style it in CSS.
// also every 3 div, the next div will appear in the second line to create a keypad style.

function start()
{
    
    let div_content ="";
    
    for (i=0; i<=11; i++)
    {
        let element = "number" + i;
        div_content = div_content + '<div class="letter" onclick="run('+i+')" id="'+element+'">'+numbers[i]+'<br>'+letter[i]+'</div>';
        if ((i+1) % 3 ==0) div_content = div_content + '<div style="clear:both;"></div>';
    }
    
    document.getElementById("key_cont").innerHTML = div_content;
    

}

//////////////////////////////////////////////////////////////////////Operating Script//////////////////////////////////////////////////

//function run will be activated when any of the div-button will be pressed, nr function argument will indicate which of the button has been pressed.

function run(nr) {

//for loop to assign addEventListener onmouseleave to all the buttons. it will activate the choiseAndReset function that will show the result on
//the display and will go to the next position in a way to choise another letter.

    for (i=0; i<=11; i++) 
    {
        let element = "number" + i;
        document.getElementById(element).addEventListener("mouseleave", choiseAndReset);
    }

//switch will check which div button has been pressed and will display the correct letter. Inside the cases there are two if.
//one to check the counter ( to check which letter need to be displayed )
//the second one is to check if the capital letter button is clicked, if yes, all the next letters will be Capital letter till will not be deactivated.

    switch (nr) {
  case 0:
    counter ++;
    
        if(counter >= 6) {
        
        counter = 1;
        text = text.toString().replace(/.$/,".");
        document.getElementById("screen").value = text;
        //return counter;
    }
    else {
        if (counter % 3 == 0) {
            text = text.toString().replace(/.$/,"?");
            document.getElementById("screen").value = text;
        }
        
        else if (counter % 4 == 0){
            text = text.toString().replace(/.$/,"!");
            document.getElementById("screen").value = text;
        }
        
        else if (counter % 5 == 0){
            text = text.toString().replace(/.$/,"'");
            document.getElementById("screen").value = text;
        }
        
        else if (counter % 2 == 0) {
            text = text.toString().replace(/.$/,",");
            document.getElementById("screen").value = text;
        }
        
        else {
            text += ".";
            document.getElementById("screen").value = text;
            
        }
    }
    
    break;
    
  case 1:
    counter ++;
    
        if(counter >= 4) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"A");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"a");
                document.getElementById("screen").value = text;
            }
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"C");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"c");
                document.getElementById("screen").value = text;
            }
        }
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"B");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"b");
                document.getElementById("screen").value = text;
            }
        }
        else {
            if( clicked == true ) {
                text += "A";
                document.getElementById("screen").value = text;
            }
            else {
                text += "a";
                document.getElementById("screen").value = text;
            }
        }
    }
    break;
  case 2:
     counter ++;
     
        if(counter >= 4) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"D");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"d");
                document.getElementById("screen").value = text;
            }
        
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"F");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"f");
                document.getElementById("screen").value = text;
            }
        }
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"E");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"e");
                document.getElementById("screen").value = text;
            }
        }
        else {
            if( clicked == true ) {
                text += "D";
                document.getElementById("screen").value = text;
            }
            else {
                text += "d";
                document.getElementById("screen").value = text;
            }
        }
    }
    break;
  case 3:
    counter ++;
    
        if(counter >= 4) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"G");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"g");
                document.getElementById("screen").value = text;
            }
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"I");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"i");
                document.getElementById("screen").value = text;
            }
        }
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"H");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"h");
                document.getElementById("screen").value = text;
            }
        }
        else {
            if( clicked == true ) {
                text += "G";
                document.getElementById("screen").value = text;
            }
            else {
                text += "g";
                document.getElementById("screen").value = text;
            }
        }
    }
    break;
  case 4:
    counter ++;
    
        if(counter >= 4) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"J");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"j");
                document.getElementById("screen").value = text;
            }
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"L");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"l");
                document.getElementById("screen").value = text;
            }
        }
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"K");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"k");
                document.getElementById("screen").value = text;
            }
        }
        else {
            if( clicked == true ) {
                text += "J";
                document.getElementById("screen").value = text;
            }
            else {
                text += "j";
                document.getElementById("screen").value = text;
            }
        }
    }
    break;
  case 5:
    counter ++;
    
        if(counter >= 4) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"M");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"m");
                document.getElementById("screen").value = text;
            }
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"O");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"o");
                document.getElementById("screen").value = text;
            }
        }
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"N");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"n");
                document.getElementById("screen").value = text;
            }
        }
        else {
            if( clicked == true ) {
                text += "M";
                document.getElementById("screen").value = text;
            }
            else {
                text += "m";
                document.getElementById("screen").value = text;
            }
        }
    }
    break;
  case 6:
    counter ++;
    
        if(counter >= 5) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"P");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"p");
                document.getElementById("screen").value = text;
            }
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"R");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"r");
                document.getElementById("screen").value = text;
            }
        }
        
        else if (counter % 4 == 0){
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"S");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"s");
                document.getElementById("screen").value = text;
            }
        }
        
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"Q");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"q");
                document.getElementById("screen").value = text;
            }
        }
        
        else {
            if( clicked == true ) {
                text += "P";
                document.getElementById("screen").value = text;
            }
            else {
                text += "p";
                document.getElementById("screen").value = text;
            }
            
        }
    }
    break;
  case 7:
    counter ++;
    
        if(counter >= 4) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"T");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"t");
                document.getElementById("screen").value = text;
            }
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"V");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"v");
                document.getElementById("screen").value = text;
            }
        }
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"U");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"u");
                document.getElementById("screen").value = text;
            }
        }
        else {
            if( clicked == true ) {
                text += "T";
                document.getElementById("screen").value = text;
            }
            else {
                text += "t";
                document.getElementById("screen").value = text;
            }
        }
    }
    break;
  case 8:
    counter ++;
    
        if(counter >= 5) {
            if( clicked == true ) {
                counter = 1;
                text = text.toString().replace(/.$/,"W");
                document.getElementById("screen").value = text;
            }
            else {
                counter = 1;
                text = text.toString().replace(/.$/,"w");
                document.getElementById("screen").value = text;
            }
    }
    else {
        if (counter % 3 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"Y");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"y");
                document.getElementById("screen").value = text;
            }
        }
        
        else if (counter % 4 == 0){
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"Z");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"z");
                document.getElementById("screen").value = text;
            }
        }
        
        else if (counter % 2 == 0) {
            if( clicked == true ) {
                text = text.toString().replace(/.$/,"X");
                document.getElementById("screen").value = text;
            }
            else {
                text = text.toString().replace(/.$/,"x");
                document.getElementById("screen").value = text;
            }
        }
        
        else {
            if( clicked == true ) {
                text += "W";
                document.getElementById("screen").value = text;
            }
            else {
                text += "w";
                document.getElementById("screen").value = text;
            }
            
        }
    }
    break;
  case 9:
    counter ++;
    
    if(counter >= 1) {
        text += "+";
        document.getElementById("screen").value = text;
    }
    
    break;
  case 10:
    counter ++;
    
    if(counter >= 1) {
        text += " ";
        document.getElementById("screen").value = text;
    }
    
    break;
  case 11:
    counter ++;
        if (clicked == true ) {
            clicked = false;
        }
        else {
            clicked = true;
        }
    break;
    
    
}


function choiseAndReset() {
    
    document.getElementById("screen").value = text;
    counter = 0;
    return counter;
    
    
}

//console.log(counter);
//console.log(clicked);
}

body {
    background-color: #253B3B;
    color: white;
}

.container {
    margin-left: auto;
    margin-right: auto;
    
}

p {
    font-size: 35px;
}
#screen {
    width: 1000px;
    height: 60px;
    position: relative;
    bottom: 20px;
}

input[type=text]
{
    color: #979797;
    font-size: 35px;
}

#display {
    width: 1200px;
    height: 100px;
    padding: 10px;
    border: 5px solid #BEE5E5;
    margin-top: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    
}

#key_cont
{
    margin-top: 25px; 
    width: 450px;
    text-align: center;
    min-height: 280px;
    margin-left: auto;
    margin-right: auto;
}

.letter
{
    width: 100px;
    height: 100px;
    text-align:center;
    padding: 5px;
    margin: 5px;
    border: 5px solid gray;
    float: left;
    cursor: pointer;
    border-radius: 15px;
    font-size: 40px;
}

.letter:hover
{
    background-color: #222222;
    color: white;
    border: 5px solid white;
}


#number11:active {     
    background-color:86A3A3;    
}

<html>

<head>
<meta charset="UTF-8">
<title>Nokia Keypad</title>
<link rel="stylesheet" href="keypad.css" type="text/css" />

</head>

<body onload="start()">
<div class="container">

    <div class="dis" id="display">
        <p><input id="screen" type="text" value="Insert your text"></p>
    </div>

    <div id="key_cont">
    
    </div>
    
</div>

<script type="text/javascript" src="keypad_final.js"></script>
</body>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-20

Comments

0 comments

From Dev

Related Related

Article