Javascript移動鍵盤事件
[英]Javascript Mobile Keyboard Events
問題描述
我正在制作一個可識別仇恨語言/單詞的鍵盤，如果他們鍵入一個，則會顯示警報。 我目前有一個可以正常使用的鍵盤。 用戶單擊的按鈕將放置在文本區域中。 我使用Javascript，HTML，CSS和一些JQuery加快了速度。 為了識別用戶鍵入的單詞，我知道我需要使用addEventListener代碼和touch事件，但我不知道如何實現它。
$(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">&</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">"</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"><</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="right-shift lastitem">shift</li> <li class="space lastitem"> </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 個解決方案
解決方案1
0 2018-12-18 22:21:14
要驗證每個鍵入的單詞，您需要捕獲輸入（您的示例已經完成）並捕獲最后一個鍵入的單詞。 為此，我們假設單詞之間用空格隔開，然后根據字典驗證最后一個單詞，以下是相關部分：
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">&</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">"</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"><</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="right-shift lastitem">shift</li> <li class="space lastitem"> </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>
使用 JavaScript 模擬鍵盤事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.