使用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（）方法的，但是我不能使用它，因為它只會替換已經輸入的文本。 我需要這樣的方式：如果我按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="kq" class="key">Q</div> <div id="kw" class="key">W</div> <div id="ke" class="key">E</div> <div id="kr" class="key">R</div> <div id="kt" class="key">T</div> <div id="ky" class="key">Y</div> <div id="ku" class="key">U</div> <div id="ki" class="key">I</div> <div id="ko" class="key">O</div> <div id="kp" 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="kq" class="key">Q</div> <div id="kw" class="key">W</div> <div id="ke" class="key">E</div> <div id="kr" class="key">R</div> <div id="kt" class="key">T</div> <div id="ky" class="key">Y</div> <div id="ku" class="key">U</div> <div id="ki" class="key">I</div> <div id="ko" class="key">O</div> <div id="kp" class="key">P</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

與您之前的工作相比，閱讀和理解起來容易得多。 另外，對不起，但我忍不住至少對鍵盤進行了一些樣式設置。