Javascript 移动键盘事件答案

【问题标题】：Javascript Mobile Keyboard EventsJavascript 移动键盘事件
【发布时间】：2019-05-19 08:50:39
【问题描述】：

我正在制作一个键盘，它可以识别仇恨语言/脏话，并在他们输入时显示警报。我目前有一个工作键盘。用户单击的按钮被放入文本区域。我使用 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>

【问题讨论】：

标签： javascript jquery html css keyboard

【解决方案1】：

要验证每个输入的单词，您需要捕获输入（您的示例已经这样做了）并捕获最后输入的单词。为此，我们假设单词用空格分隔，然后根据字典验证最后一个单词，以下是相关部分：

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>

【讨论】：