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（）方法的，但是我不能使用它，因为它只会替换已经输入的文本。我需要这样的方式：如果我按3次“ Q”，则字母“ Q”在文本框中出现3次。

我该如何使用jquery或javascript？

Answer 1

此代码段将字母添加到文本框中。如果您只想放置单击的字母，请删除变量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>

比您之前的工作更容易阅读和理解。另外，对不起，但我忍不住至少对键盘进行了一些样式设置。

使用jQuery / javascript单击div时如何在文本框中添加字符

4 个答案: