使用jquery / javascript单击div时如何将字符添加到文本框

Question

我正在构建自己的 jquery 键盘，当单击或触摸 div 时，我需要在 x 字段中输入 x 字符。

这是我的一些键盘 HTML 结构：

<input id="name" name="name" type="text" />

<div class="key-row" style="width: 1092px;">
    <div id="k-q" class="key">Q</div>
    <div id="k-w" class="key">W</div>
    <div id="k-e" class="key">E</div>
    <div id="k-r" class="key">R</div>
    <div id="k-t" class="key">T</div>
    <div id="k-y" class="key">Y</div>
    <div id="k-u" class="key">U</div>
    <div id="k-i" class="key">I</div>
    <div id="k-o" class="key">O</div>
    <div id="k-p" class="key">P</div>
</div>

这是我正在开发的 jquery：

$( "#k-q" ).click(function() {
    //alert( "Q pressed" );
    // $('#name').append('Q');
    // $("input[type='text']").append('some new text')
    // $('#name').add( "aaaaa" );
    //$('#name').text('Q');
    $('#name').val('Q');
});

如您所见，我已经尝试了不同的输入方式。唯一能完成这项工作的是使用 var() 方法的那个，但我不能使用它，因为它只会替换已经输入的文本。我需要这样，如果我按“Q”3 次，字母“Q”会在文本框中出现 3 次。

如何使用 jquery 或 javascript 做到这一点？

Answer 1

这个 sn-p 将字母添加到文本框中。如果您只想放置单击的字母，请删除变量currentName

$("div.key").click(function(e){
  var currentName = $("#name").val();
  $("#name").val(currentName + $(this).text());
});

.key{
border: 1px solid #333;
padding: 2px;
width: 16px;
margin: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" name="name" type="text" />

<div class="key-row" style="width: 1092px;">
    <div id="k-q" class="key">Q</div>
    <div id="k-w" class="key">W</div>
    <div id="k-e" class="key">E</div>
    <div id="k-r" class="key">R</div>
    <div id="k-t" class="key">T</div>
    <div id="k-y" class="key">Y</div>
    <div id="k-u" class="key">U</div>
    <div id="k-i" class="key">I</div>
    <div id="k-o" class="key">O</div>
    <div id="k-p" class="key">P</div>
</div>

Answer 2

您不需要编写 div 的每次点击，相反，您可以使用类选择器。您可以每次都抓取输入值以附加到它。

<script type="text/javascript">
    $(".key").click(function() {
    $('#name').val($('#name').val() + this.innerText);
});
</script>

Answer 3

您可以获取输入的当前值，然后将新字母附加到它：

$("#name").val($("#name").val() + "Q");

Answer 4

检查一下 - 这对您来说会简单得多。

/*
 * By obtaining a reference at the beginning,
 * we prevent unnecessary calls
 */
var $input = $('#name');


/*
 * We can get all of the keys by using '.key'
 */
$('.key').click(e => {
  /**
   * We are clicking on the div, so the event's target
   * is the div. This element is not wrapped by jQuery,
   * so we use the DOM textContent property.
   */
  var characterToAppend = e.target.textContent;
  /**
   * The .val() function without any parameters will
   * return the current contents of an input element.
   * We add the new character to it to prevent the
   * box from clearing out like you mentioned.
   */
  var newTextContent = $input.val() + characterToAppend;
  $input.val(newTextContent);
});

.key-row {
  background-color: rgb(50, 50, 75);
  bottom: 0;
  display: flex;
  padding: 50px;
  position: fixed;
  width: 100vw;
}

.key {
  background-color: white;
  display: inline-block;
  font-family: sans-serif;
  padding: 16px;
  transition: box-shadow 500ms;
}

.key:hover {
  box-shadow: 0 0 5px black;
  z-index: 2; /* Show the shadow above the other boxes */
}

<input id="name" name="name" type="text" />

<div class="key-row">
  <div id="k-q" class="key">Q</div>
  <div id="k-w" class="key">W</div>
  <div id="k-e" class="key">E</div>
  <div id="k-r" class="key">R</div>
  <div id="k-t" class="key">T</div>
  <div id="k-y" class="key">Y</div>
  <div id="k-u" class="key">U</div>
  <div id="k-i" class="key">I</div>
  <div id="k-o" class="key">O</div>
  <div id="k-p" class="key">P</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

比您之前所做的更容易阅读和理解。另外，抱歉，我至少有点忍不住要设计键盘样式。