我创建了一个虚拟键盘来解密html / java页面上的拼图代码，但是我无法弄清楚如何添加退格或换行符按钮以避免每次出现单个错误时都必须将textarea鼠标点击退格 . 或需要换行 .
该页面的代码在下面添加，任何想法尽可能简单的想法将非常感激，因为我仍在学习Javascript并且还没有完全了解一些事件 .
提前致谢 .
<!DOCTYPE HTML>
<HTML>
<head>
<!--JQuery activation-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="container-fluid">
<div class="col-md-8">
<div id="letters">
<!-- PLCKFBG HMOERJ AQNXYIZ VWSUT,.123456789O (and space) cypher alphabet-->
<input type="submit" style="font-family:'Wingdings'" value="P" style="width:100%" id="A" />
<input type="submit" style="font-family:'Wingdings'" value="L" style="width:100%" id="B" />
<input type="submit" style="font-family:'Wingdings'" value="C" style="width:100%" id="C" />
<input type="submit" style="font-family:'Wingdings'" value="K" style="width:100%" id="D" />
<input type="submit" style="font-family:'Wingdings'" value="F" style="width:100%" id="E" />
<input type="submit" style="font-family:'Wingdings'" value="B" style="width:100%" id="F" />
<input type="submit" style="font-family:'Wingdings'" value="G" style="width:100%" id="G" />
<input type="submit" style="font-family:'Wingdings'" value="D" style="width:100%" id="H" />
<input type="submit" style="font-family:'Wingdings'" value="H" style="width:100%" id="I" />
<input type="submit" style="font-family:'Wingdings'" value="M" style="width:100%" id="J" />
<input type="submit" style="font-family:'Wingdings'" value="O" style="width:100%" id="K" />
<input type="submit" style="font-family:'Wingdings'" value="E" style="width:100%" id="L" />
<input type="submit" style="font-family:'Wingdings'" value="R" style="width:100%" id="M" />
<input type="submit" style="font-family:'Wingdings'" value="J" style="width:100%" id="N" />
<input type="submit" style="font-family:'Wingdings'" value="A" style="width:100%" id="O" />
<input type="submit" style="font-family:'Wingdings'" value="Q" style="width:100%" id="P" />
<input type="submit" style="font-family:'Wingdings'" value="N" style="width:100%" id="Q" />
<input type="submit" style="font-family:'Wingdings'" value="X" style="width:100%" id="R" />
<input type="submit" style="font-family:'Wingdings'" value="Y" style="width:100%" id="S" />
<input type="submit" style="font-family:'Wingdings'" value="I" style="width:100%" id="T" />
<input type="submit" style="font-family:'Wingdings'" value="Z" style="width:100%" id="U" />
<input type="submit" style="font-family:'Wingdings'" value="V" style="width:100%" id="V" />
<input type="submit" style="font-family:'Wingdings'" value="W" style="width:100%" id="W" />
<input type="submit" style="font-family:'Wingdings'" value="S" style="width:100%" id="X" />
<input type="submit" style="font-family:'Wingdings'" value="U" style="width:100%" id="Y" />
<input type="submit" style="font-family:'Wingdings'" value="T" style="width:100%" id="Z" />
<input type="submit" style="font-family:'Wingdings'" value="." style="width:100%" id="." />
<input type="submit" style="font-family:'Wingdings'" value="," style="width:100%" id="," />
<input type="submit" style="font-family:'Wingdings'" value="1" style="width:100%" id="1" />
<input type="submit" style="font-family:'Wingdings'" value="2" style="width:100%" id="2" />
<input type="submit" style="font-family:'Wingdings'" value="3" style="width:100%" id="3" />
<input type="submit" style="font-family:'Wingdings'" value="4" style="width:100%" id="4" />
<input type="submit" style="font-family:'Wingdings'" value="5" style="width:100%" id="5" />
<input type="submit" style="font-family:'Wingdings'" value="6" style="width:100%" id="6" />
<input type="submit" style="font-family:'Wingdings'" value="7" style="width:100%" id="7" />
<input type="submit" style="font-family:'Wingdings'" value="8" style="width:100%" id="8" />
<input type="submit" style="font-family:'Wingdings'" value="9" style="width:100%" id="9" />
<input type="submit" style="font-family:'Wingdings'" value="A" style="width:100%" id="O" />
<input type="submit" style="font-family:'Copperplate'" value="[Space]" style="width:100%" id=" " />
</div>
</div>
<div class="col-md-4">
<!-- Clear button -->
<div id="clearbutton">
<input type="button" value="Clear" onclick="javascript:eraseText();">
</div>
<!-- textarea "translation"-->
<textarea id="translation" class="form control ChangeMe" name="translation" rows=10 cols=50 placeholder="Common Translation"></textarea>
</div>
</div>
<script>
// code for letter translation
$(document).ready(function(){
var txt=$('#translation');
$("#letters").on('click','input',function() {
txt.val(txt.val()+this.id);
});
});
//Clear Button Function
function eraseText() {
document.getElementById("translation").value = "";
}
//disable backspace outside of text boxes
$(document).keydown(function (e) {
var element = e.target.nodeName.toLowerCase();
if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly") || (e.target.getAttribute("type") ==="checkbox")) {
if (e.keyCode === 8) {
return false;
}
}
});
</script>
</body>
</html>
2 回答
退格键应该只删除textarea的最后一个字符吗？因此，只需将退格键设置为textarea 's value to the textarea' s值减去使用JavaScript's substring method的最后一个字符 . 这是一些pseudocode：
插入一个新行就像1一样简单 . 只需将
\\\n放入代码即可 .