Login   Register  
PHP Classes

File: index.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Richard Keizer  >  Swype for PHP  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: QWERTY keyboard example
Class: Swype for PHP
Auto-complete words entered with a Swype keyboard
Author: By
Last change: minor textual update
Date: 2 years ago
Size: 4,712 bytes


Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <meta name="apple-mobile-web-app-capable" content="no" />
    <meta name="viewport" content="user-scalable=no" />
      * {
        margin: 0;
        padding: 0;
      #wrapper {
        margin:0 auto;
      #output {
        border:1px solid black;
      .keyboard {
        border:1px solid black;
      .keyboard ul {
      .keyboard ul ul {
      .keyboard ul ul li {
        border:1px outset gray;
      .keyboard .swypable {
      .keyboard ul ul li:hover {
      .keyboard .middle {
      .keyboard .lower {
      function init() {
      function isIOS() {
        var agent = navigator.userAgent.toLowerCase();
        return agent.match(/(iphone|ipod|ipad)/);
      function initkeyboard(name) {
        var el = document.getElementById(name);
        el.swyping = false;
        el.keybuffer = '';
        if (isIOS()) {
          el.ontouchstart = touchmovehandler;
          el.ontouchmove = touchmovehandler;
          el.ontouchend = mouseuphandler;
        } else {
          el.onmousedown = mousedownhandler;
          el.onmouseover = mouseoverhandler;
          el.onmouseup = mouseuphandler;
      function touchmovehandler(e) {
        var e = window.event || e;
        var target = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
        if (target.className=='swypable') this.keybuffer += target.textContent;
        return true;
      function mousedownhandler(e) {
        var e = window.event || e;
        if (e.target.className=='swypable') this.keybuffer += e.target.textContent;
        this.swyping = true;
        return false;
      function mouseuphandler(e) {
        this.swyping = false;
        var el = document.getElementById('output');
        el.src = 'swypeserver.php?lang=en&text=' + this.keybuffer;
        this.keybuffer = '';
      function mouseoverhandler(e) {
        var e = window.event || e;
        if (!this.swyping) return;
        if (e.target.className=='swypable') this.keybuffer += e.target.textContent;

  <body ontouchmove='event.preventDefault();' onload='init();'>
    <div id='wrapper'>
      <h1>Simple SWYPE demo</h1>
      <p>english dictionary - QWERTY keyboard</p>
      <p>Swype using your mouse: clickleft -> hold -> swype -> release</p>
      <p>or use your iOS device</p>
      <p>tested with Safari and Firefox both on OSX and Safari on iOS</p>
      <iframe id='output' height=40></iframe>
      <div id='keyboard' class='keyboard'>
          <li class='upper'>
              <li class='swypable'>q</li><li class='swypable'>w</li><li class='swypable'>e</li><li class='swypable'>r</li><li class='swypable'>t</li><li class='swypable'>y</li><li class='swypable'>u</li><li class='swypable'>i</li><li class='swypable'>o</li><li class='swypable'>p</li>
          <li class='middle'>
              <li class='swypable'>a</li><li class='swypable'>s</li><li class='swypable'>d</li><li class='swypable'>f</li><li class='swypable'>g</li><li class='swypable'>h</li><li class='swypable'>j</li><li class='swypable'>k</li><li class='swypable'>l</li>
          <li class='lower'>
              <li class='swypable'>z</li><li class='swypable'>x</li><li class='swypable'>c</li><li class='swypable'>v</li><li class='swypable'>b</li><li class='swypable'>n</li><li class='swypable'>m</li>