Ste*_*eve 1 html javascript button backspace
我创建了一个虚拟键盘来破译 html/java 页面上的谜题代码，但是我无法弄清楚如何添加退格或换行按钮，以避免每次犯一个错误时都必须用鼠标单击文本区域来退格或者需要一条新线。
下面添加了页面的代码，任何尽可能简单地做到这一点的想法将不胜感激，因为我仍在学习 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>
退格键应该只截掉文本区域的最后一个字符，对吧？因此，只需使用JavaScript 的 substring method让退格键将文本区域的值设置为文本区域的值减去最后一个字符即可。这是一些伪代码：
function onPressBackspace() {
myTextarea.value = myTextarea.value.substring(0, myTextarea.value.length - 1);
}
| 归档时间： |
|
| 查看次数： |
14962 次 |
| 最近记录： |