События Javascript Mobile Keyboard - PullRequest
Новая
       9

События Javascript Mobile Keyboard

0 голосов
/ 19 декабря 2018

Я делаю клавиатуру, которая распознает слова ненависти / ругательства и показывает предупреждение, если они набирают.В настоящее время у меня есть рабочая клавиатура.Кнопки, которые нажимает пользователь, помещаются в текстовую область.Я использовал Javascript, HTML, CSS и некоторые JQuery, чтобы ускорить процесс.Я знаю, что для распознавания слов, которые вводит пользователь, мне нужно использовать код addEventListener и сенсорное событие, но я не знаю, как его реализовать.

$(function() {
  var $write = $('#write'),
    shift = false,
    capslock = false; //DONE

  $('#keyboard li').click(function() {
    var $this = $(this),
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable //DONE

    // Shift keys
    if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
      $('.letter').toggleClass('uppercase');
      $('.symbol span').toggle();

      shift = (shift === true) ? false : true;
      capslock = false;
      return false;
    } //DONE

    // Caps lock
    if ($this.hasClass('capslock')) {
      $('.letter').toggleClass('uppercase');
      capslock = true;
      return false; //DONE
    }

    // Delete
    if ($this.hasClass('delete')) {
      var html = $write.val();

      $write.val(html.substr(0, html.length - 1));
      return false;
    } //DONE

    // Special characters
    if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
    if ($this.hasClass('space')) character = ' ';
    if ($this.hasClass('tab')) character = "\t";
    if ($this.hasClass('return')) character = "\n";
    //DONE
    // Uppercase letter
    if ($this.hasClass('uppercase')) character = character.toUpperCase();
    //DONE
    // Remove shift once a key is clicked.
    if (shift === true) {
      $('.symbol span').toggle();
      if (capslock === false) $('.letter').toggleClass('uppercase');

      shift = false;
    }
    console.log("DO IT ", character);
    // Add the character
    $write.val($write.val() + character);
  });
});
* {
  margin: 0;
  padding: 0;
}

body {
  font: 71%/1.5 Verdana, Sans-Serif;
  background: DodgerBlue;
}

#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: DogerBlue;
  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;
  color: Orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Online Keyboard</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>

1 Ответ

0 голосов
/ 19 декабря 2018

Чтобы проверить каждое введенное слово, вам нужно захватить ввод (что ваш пример уже делает) и захватить последнее введенное слово.Для этого мы предполагаем, что слова разделены пробелами, а затем проверяем последнее слово по словарю. Вот соответствующие части: 

var isValidWord = function(word) {
  // update the following variable with all the invalid words
  var invalidWords = ['foo', 'bar'];
  return !invalidWords.find(function(invalid) {
    return word === invalid;
  });
};

var inputText = $write.val() + character;
var words = inputText.split(' ');
var lastWord = words[words.length - 1]
if (isValidWord(lastWord)) {
  $write.val(inputText);
} else {
  alert('Error: Please choose a different word')
}

И полный пример, попробуйте ввести foo или bar и вы получите предупреждение: 

$(function() {

  var isValidWord = function(word) {
    var invalidWords = ['foo', 'bar'];
    return !invalidWords.find(function(invalid) {
      return word === invalid;
    });
  };
  var $write = $('#write'),
    shift = false,
    capslock = false; //DONE

  $('#keyboard li').click(function() {
    var $this = $(this),
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable //DONE

    // Shift keys
    if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
      $('.letter').toggleClass('uppercase');
      $('.symbol span').toggle();

      shift = (shift === true) ? false : true;
      capslock = false;
      return false;
    } //DONE

    // Caps lock
    if ($this.hasClass('capslock')) {
      $('.letter').toggleClass('uppercase');
      capslock = true;
      return false; //DONE
    }

    // Delete
    if ($this.hasClass('delete')) {
      var html = $write.val();

      $write.val(html.substr(0, html.length - 1));
      return false;
    } //DONE

    // Special characters
    if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
    if ($this.hasClass('space')) character = ' ';
    if ($this.hasClass('tab')) character = "\t";
    if ($this.hasClass('return')) character = "\n";
    //DONE
    // Uppercase letter
    if ($this.hasClass('uppercase')) character = character.toUpperCase();
    //DONE
    // Remove shift once a key is clicked.
    if (shift === true) {
      $('.symbol span').toggle();
      if (capslock === false) $('.letter').toggleClass('uppercase');

      shift = false;
    }
    var inputText = $write.val() + character;
    var words = inputText.split(' ');
    var lastWord = words[words.length - 1]
    if (isValidWord(lastWord)) {
      $write.val(inputText);
    } else {
      alert('Error: Please choose a different word')
    }
  });
});
* {
  margin: 0;
  padding: 0;
}

body {
  font: 71%/1.5 Verdana, Sans-Serif;
  background: DodgerBlue;
}

#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: DogerBlue;
  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;
  color: Orange;
}
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Online Keyboard</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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...