Создание клавиатуры Javascript для устройств Android

Question

Я делаю клавиатуру, которая распознает ненормативную лексику / ругательство для устройств Android, используя JavaScript.Я не знаком с Java, поэтому у меня проблемы с достижением моей цели.Я хочу сделать обычную клавиатуру, которую пользователь загружает из Google Play, включает ее, а затем может использовать ее для текстовых сообщений, поиска элементов в Интернете и т. Д. В настоящее время у меня есть клавиатура, которая получает слово, набранное пользователем, и еслислово является недопустимым словом (у меня есть недопустимая переменная слова со всей ненавистнической речью), появляется предупреждение.Если слово не является недействительным, введенный пользователем символ / слово помещается в текстовое поле.(Текстовая область предназначена для тестирования, когда у меня будет рабочая клавиатура, я удалю текстовую область).Я понимаю, что могу использовать PhoneGap для разработки своего приложения, но не могу понять, как реализовать идею.Можно ли как-нибудь загрузить это приложение в Google Play и просто попросить пользователя загрузить его и использовать для текстовых сообщений и т. Д.?Это мой следующий код.

Javascript: (я заменил ругательные слова в переменной недействительными словами цветами, поэтому боты переполнения стека не помечают мой пост)

$(function() {

  //Hate language/cuss words recognition:
  var isValidWord = function(word) { //This code updates the following variables with all the invalid words
    var invalidWords = ['blue', 'red', 'green', 'yellow', 'pink', 'black', 'white',]; //This code contains all of the invalid words. 
    return !invalidWords.find(function(invalid) { //This code returns the function to find invalid words. 
      return word === invalid; //If the user has typed a invalidWord, this code returns that the word is invalid.
    }); 
  };
  var $write = $('#write'),
    shift = false,
    capslock = false; // This code is imported from Jquery.
  // It defines 3 variables, textarea, a shift status, and a caps lock status.
  $('#keyboard li').click(function() { //This code creates 2 variables when a character is clicked (Not a symbol ).
    var $this = $(this),
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
      //Blank span
// Shift key
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { // If the shift key is pressed,(The shift key is left or right shift) we togle the uppercase value of each letter.
  $('.letter').toggleClass('uppercase'); //This code calls the leter to be uppercase.
  $('.symbol span').toggle(); //Nothing happens if it is a symbol.

  shift = (shift === true) ? false : true; // This code sets the shift key to the opposite boolean. (If shift key= false, set it to true.)
  capslock = false; // capslock is not enabled.
  return false; // If the code above is true, the computer returns a false. The false 
}
// Caps lock
if ($this.hasClass('capslock')) {
  $('.letter').toggleClass('uppercase'); //This code gets the letters you type in and toggles their class to uppercase.
  capslock = true; //This code sets the capslock button to true.
  return false; // This code returns the boolean false to the computer, setting the caps lock to false. 
}
// Delete
if ($this.hasClass('delete')) { //This Code happens when hit the delete button.
  var html = $write.val(); // This code defines the variable HTML to the write vairiable.val, which gets the letters you typed in earlier.

  $write.val(html.substr(0, html.length - 1)); //This code makes the delete button delete. The number 0 defines that it deletes the previous number and the number -1 takes away part of the string typed by the user.
  return false;
}

  // Special characters
  if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); //This code sets the symbol charactes' spam to visable, and gets what the characters look like from the HTML that I have typed in earlier.
  if ($this.hasClass('space')) character = ' '; //Makes a space bettween characters and symbols typed by the user.
  if ($this.hasClass('tab')) character = "\t" // This code uses the \t metaCharacter which finds a tab character. It returns the number in the string of where the character was found, and if the user has not typed anything, it returns -1)
  if ($this.hasClass('return')) character = "\n"; // This code uses the \n metaCharacter. If return is pressed, the computer located the user to another line. If there are no more lines, it stays on the same line.

  // Uppercase letters
  if ($this.hasClass('uppercase')) character = character.toUpperCase(); // This code defines the uppercase method and the toUpperCase method. If you have clicked shift or caps lock, it toggles the uppercase class. It would not work for me so I did some rechearch. I figured out that you need to add the toUpperCase method. The method sets any strings typed and sets the class to uppercase. (I defeined the classes in the index.HTML file.)

  // Remove shift once a key is clicked.
  if (shift === true) { //This code happenes when shift is true. (Shift is true when it is pressed.)
    $('.symbol span').toggle(); //This code happens when a symbol is pressed when shift is on
    if (capslock === false) $('.letter').toggleClass('uppercase'); // This code happens when capsLock is false and the shift key is pressed. After a character is pressed with the shift key, the shift is set to false.

    shift = false; //Sets the shift key to false.
  }
  var inputText = $write.val() + character; //This code defines the variable inputText to the current letters typed, plus the new character typed. 
  var words = inputText.split(' '); // This code defines the variable words to the variable inputText, and then splits the text. A split in the tex is when you take a part of a string away.
  var lastWord = words[words.length - 1] // This code gets the last word the user typed by getting the length of the word and taking 1 letter away. 
  if (isValidWord(lastWord)) { //This code detirmines if the last word typed by the user is a valid word. 
    $write.val(inputText); //If the last word typed by the user is a valid word, it types the word. 
  } else {
    alert('Error: The word you have just typed contains hate language/cuss words. These words are mean and have the possibiliy of hurting someones feelings. Do you want to ThinkTwice about what you have just said?'); //If the last typed word is invalid, this alert comes up. 
      }
    });
});

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>ThinkTwice</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="container">
    <textarea id="write" rows="6" cols="60"></textarea>
    <ul id="keyboard">
        <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
        <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
        <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
        <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
        <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
        <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
        <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
        <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
        <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
        <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
        <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
        <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
        <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
        <li class="delete lastitem">delete</li>
        <li class="tab">tab</li>
        <li class="letter">q</li>
        <li class="letter">w</li>
        <li class="letter">e</li>
        <li class="letter">r</li>
        <li class="letter">t</li>
        <li class="letter">y</li>
        <li class="letter">u</li>
        <li class="letter">i</li>
        <li class="letter">o</li>
        <li class="letter">p</li>
        <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
        <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
        <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
        <li class="capslock">caps lock</li>
        <li class="letter">a</li>
        <li class="letter">s</li>
        <li class="letter">d</li>
        <li class="letter">f</li>
        <li class="letter">g</li>
        <li class="letter">h</li>
        <li class="letter">j</li>
        <li class="letter">k</li>
        <li class="letter">l</li>
        <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
        <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
        <li class="return lastitem">return</li>
        <li class="left-shift">shift</li>
        <li class="letter">z</li>
        <li class="letter">x</li>
        <li class="letter">c</li>
        <li class="letter">v</li>
        <li class="letter">b</li>
        <li class="letter">n</li>
        <li class="letter">m</li>
        <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
        <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
        <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
        <li class="right-shift lastitem">shift</li>
        <li class="space lastitem">&nbsp;</li>
    </ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="keyboard.js"></script>
</body>
</html>

CSS: (думаю, мне нужно сжать кнопки, чтобы они подходили для мобильных устройств)

* {
margin: 0; // A margin is the space outside a element.
padding: 0; //A padding is the space inside a element.
}
body {
font: 71%/1.5 Verdana, Sans-Serif /; // The font I use.
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
    #keyboard li {
    float: left;
    margin: 0 5px 5px 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
        .capslock, .tab, .left-shift {
        clear: left;
        }
            #keyboard .tab, #keyboard .delete {
            width: 70px;
            }
            #keyboard .capslock {
            width: 80px;
            }
            #keyboard .return {
            width: 77px;
            background-color: Orange
            }
            #keyboard .left-shift {
            width: 95px;
            }
            #keyboard .right-shift {
            width: 109px;
            }
        .lastitem {
        margin-right: 0;
        }
        .uppercase {
        text-transform: uppercase;
        }
        #keyboard .space {
        clear: left;
        width: 600px; //Origional is 681 // changed on november 3 to 651. Possible space for emojis.
        }
        .on { //  The span with the on class will be hidden. This changes when a
           user clicks on the shift key.
        display: none;
        }
        #keyboard li:hover {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
        }

Если вы прочитали до конца, вы великолепны!Извините, пост такой длинный.Если кому-то нужны дополнительные сведения о моем приложении, пожалуйста, дайте мне знать.