virtual keyboard

by burki

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="wrapper">
  Ein Inputfeld:<br>
  <input type="text" />

  <br><br>Eine Textarea:<br>
  <textarea></textarea>

  <br><br>Und noch ein Inputfeld:<br>
  <input type="text" />

  <br><br>Und noch eine Textarea:<br>
  <textarea></textarea>

  <br><br>
  <div id="keyboard">
    Und unsere "virtuelle Tastatur" - erst einem Input-Feld den Fokus geben, dann auf den/die Buttons klicken:<br>
    <button>X</button>
    <button>Y</button>
    <button>Z</button>
  </div>
</div>

JavaScript

var lastFocussed;

var dialog = $('#keyboard').dialog({
  autoOpen: false,
});

$("#keyboard > button").on("click", function(event) {
  var buttonLabel = event.target.innerText || event.target.textContent;
  if (lastFocussed) {
    lastFocussed.value += buttonLabel;
  }
});

$("#wrapper").on("focusout", function(event) {
  var target = event.target;
  if ((target.nodeName === 'INPUT' && target.type === 'text') || target.nodeName === 'TEXTAREA') {
    lastFocussed = target;
  }
});

$("#wrapper").on("focusin", function(event) {
  var target = event.target;
  if ((target.nodeName === 'INPUT' && target.type === 'text') || target.nodeName === 'TEXTAREA') {
    dialog.dialog('open').dialog('option', 'position', {
      my: 'left top',
      at: 'right bottom',
      of: $(target)
    })
  }
});