个人中心
gpt4 book ai didi

javascript - 为基于 html/javascript 的文本区域创建一个退格按钮

转载 作者：行者123 更新时间：2023-11-28 04:51:16 25 4
gpt4 key购买 nike

我创建了一个虚拟键盘来破译 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's substring method .这是一些 pseudocode :

function onPressBackspace() {
    myTextarea.value = myTextarea.value.substring(0, myTextarea.value.length - 1);
}

关于javascript - 为基于 html/javascript 的文本区域创建一个退格按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31863184/

25 4 0
文章推荐： javascript - 如何在Javascript中的websocket请求 header 中设置cookie？
文章推荐： c++ - 有没有办法从基类函数参数中推导出模板参数？
文章推荐： html - 输入聚焦时不显示 Span
文章推荐： c++ - 迭代器的类型 C++
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com