如何设置这些按钮 'id' 值以附加到文本区域中？

Question

我得到了一个代码，其中包含与不同于其正常附加密钥的字母相关的翼形字符，我正在尝试创建一个程序来破译它们。不幸的是，我不知道如何添加到文本区域，只能覆盖已经存在的字符，这对我来说不是很有帮助。

我在这里完全是初学者，尤其是 Jscript，所以我希望这是有道理的。有人可以帮忙吗？

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<br>
<!-- PLCKFBGDHMOERJAQNXYIZVXSUT 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" />
<br>
<br>
<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" />
<br>
<br>
<!-- I'll add the rest later -->

<textarea id="txtarea" name="txtarea"></textarea>

<script>

// INDIVIDUAL LETTER INPUT CODES
$(document).ready(function(){
  $("#A").click(function(){
      $('#txtarea').html('A');
});
});

$(document).ready(function(){
  $("#B").click(function(){
      $('#txtarea').html('B');
});
});

$(document).ready(function(){
  $("#C").click(function(){
      $('#txtarea').html('C');
});
});
$(document).ready(function(){
  $("#D").click(function(){
      $('#txtarea').html('D');
});
});
$(document).ready(function(){
  $("#E").click(function(){
      $('#txtarea').html('E');
});
});
$(document).ready(function(){
  $("#F").click(function(){
      $('#txtarea').html('F');
});
});
$(document).ready(function(){
  $("#G").click(function(){
      $('#txtarea').html('G');
});
});
$(document).ready(function(){
  $("#H").click(function(){
      $('#txtarea').html('H');
});
});
$(document).ready(function(){
  $("#I").click(function(){
      $('#txtarea').html('I');
});
});
$(document).ready(function(){
  $("#J").click(function(){
      $('#txtarea').html('J');
});
});
$(document).ready(function(){
  $("#K").click(function(){
      $('#txtarea').html('K');
});
});
$(document).ready(function(){
  $("#L").click(function(){
      $('#txtarea').html('L');
});
});
$(document).ready(function(){
  $("#M").click(function(){
      $('#txtarea').html('M');
});
});
$(document).ready(function(){
  $("#N").click(function(){
      $('#txtarea').html('N');
});
});
</script>
<!-- Ill add the rest later -->
</body>

Answer 1

您可以使用事件委托大大简化您的代码。只需在所有输入周围添加一个 div。

<div id="letters">
  <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" />
<!-- etc  -->
</div>

那么你的jQuery只需要一个事件。

$(document).ready(function(){
  var txt=$('#txtarea');
  $("#letters").on('click','input',function() {
    txt.val(txt.val()+this.value);
  });
});

我相信这就是你想要的。

您可以创建一个包含 style 属性的 class，并将其应用于所有 input。

.letters {
  font-family:'wingdings';
  width:100%;
}

<input type="submit" class="letters" value="P"/>

我创建了一个 fiddle 以便您可以看到它的实际效果。

Answer 2

首先去掉那些不必要的document.ready()函数。一个这样的函数对于所有事件处理程序就足够了（它简化了您的代码）。

您可以像上面提到的 .on 方法那样使用更简单的代码，但是，请记住 onfocus 和 onblur 是文本框的更好的事件处理程序，而不是 click 事件.

“在尝试之前尝试理解这些功能的含义..它肯定会增加你的学习经验..

为了更好地理解，请参考 jquery documentation 中的 .val() 和 .append() 方法。这可能有助于解决您的问题。我强烈建议你去寻找文档，而不是直接复制和粘贴你已经得到的解决方案。这对初学者来说是最好的。

如何设置这些按钮 'id' 值以附加到文本区域中？

How do I set these buttons 'id' values to append in the textarea?

html

javascript

jquery

textarea