Javascript 移动键盘事件
Posted
技术标签:
【中文标题】Javascript 移动键盘事件【英文标题】:Javascript Mobile Keyboard Events 【发布时间】: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">&</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】:要验证每个输入的单词,您需要捕获输入(您的示例已经这样做了)并捕获最后输入的单词。为此,我们假设单词用空格分隔,然后根据字典验证最后一个单词,以下是相关部分:
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 移动键盘事件的主要内容,如果未能解决你的问题,请参考以下文章