on screen keyboard

pure js & html/css Create an event handler to get the key presses and activate

by Matt Rummler

HTML

<section id="messageUI" class="landingpageform">
              <ul class="unmarkedList">
                <li class="inputs">
                  <input list="cannedmessages" id="messages" value=" " placeholder="use the keyboard below">
                </li>
                <li id='MessageString'>
                  <datalist id="cannedmessages">
                  <select>
                    <option id="0" data-value="hi">hi</option>
                    <option id="1" data-value="bye">bye</option>
                    <option id="2" data-value="how are you?">how are you?</option>
                    <option id="3" data-value="call">call</option>
                    <option id="4" data-value="text">text</option>
                  </select>
                  </datalist>
                <!--  <input list="cannedmessages"> -->
                </li>
                <li>
                  <!-- create the keyboard below -->
                  <div id="keybord" class="font10more">
                    <span id="kb_rowo" class="flex frow kbd">
                    <button class="kbdkey">1</button>
                    <button class="kbdkey">2</button>
                    <button class="kbdkey">3</button>
                    <button class="kbdkey">4</button>
                    <button class="kbdkey">5</button>
                    <button class="kbdkey">6</button>
                    <button class="kbdkey">7</button>
                    <button class="kbdkey">8</button>
                    <button class="kbdkey">9</button>
                    <button class="kbdkey">0</button>
                    </span>
                    <span id="kb_row1" class="flex frow kbd">
                    <button class="kbdkey">q</button>
                    <button class="kbdkey">w</button>
                    <button class="kbdkey">e</button>
                    <button class="kbdkey">r</button>
                    <button class="kbdkey">t</button>
                    <button...

CSS

.flex
{
  display: flex;
}
.frow
{
  flex-flow: row;
}
.fcolumn
{
  flex-flow: column;
}
ul[class*=unmarkedList]
{
    list-style-type:none;
    border: none;
    text-align: left;
    padding-top: 15px;
}
.messagebox
{
  min-height: 4em;
  min-width: 6em;
  max-width: 35em;
  box-shadow: inset 1px 1px 3px 3px rgba( 0,0,0,0.3 );
  margin: 1px;
}

JavaScript

/***
**
IMPORTANT NOTES:
THIS STOPPED WORKING ON jsfiddle
DETAILS: jsfiddle generates an error in it's code that seems to be something I can't get around.
I've moved on to codepen for further development

1. cmDataList IS the options from the input
2. cmInput.value is the selected value
3. cmDataList.options is a list of all of the HTML <option></option> choices available in the data list
4. It may be possible to select the correct option from the cmDataList by utilizing the .name property* using cmInput.Value
*(I think that's what it is ... looked up datalist element on MDN or W3C schools and one of them seems to have suggested something similar)
5. cmDataList.setPointerCapture() may be the thing that allows the autocomplete to show up after cmDataList.focus();
6. there is also a .ongotpointercapture that might be useful 
6.1 There might be some other events that are valuable such as: .getDestinationInsertionPoints
7. using an event will probably work as well https://stackoverflow.com/questions/26103285/find-selected-item-in-datalist-in-html (first answer)

ALSO https://caniuse.com/#search=datalist shows that it doesn't work or work well in a number of browsers yet (Chrome is not one of them)
In case just putting a <select> in the middle doesn't resolve this then here's an article: https://www.hongkiat.com/blog/search-select-using-datalist/ 
***/
var MessageUI = document.getElementById('messageUI');
var buttons = MessageUI.getElementsByClassName('kbdkey');
var addToMessage = document.getElementById('addToMessage');
var cmDataList = document.getElementById('cannedmessages');//the data list of canned messages
var cmInput = document.getElementById('messages');//the input that the letters go to
var cmHiddenInput = document.getElementById('messageToSend');//the target location to hold the message to be sent
var cmMessageBox = document.getElementById('messagebox');

function testing()
{
  alert('before for of');
  for(button of buttons)
  {
    //iterate through each...