嘗試使用JS在Bootstrap中創建虛擬鍵盤

Question

有一個帶有虛擬鍵盤的簡單文本框，當用戶單擊文本框內的鍵盤圖標時，該虛擬鍵盤可以切換進出：

每個字母都是可單擊的按鈕，其想法是在文本框中填充被單擊按鈕的值。 這是我所做的：

HTML

<div class="input-group col-md-4 col-md-offset-4">
    <input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg">
    <a href="javascript:;" onclick="toggler('virtualkeypad');"><span class="fa fa-keyboard-o fa-2x lookup-icon"></span></a>
    <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button" id="lookup">Lookup</button></span>
</div>

<div id="virtualkeypad" class="col-md-offset-4 hidden">
    <button id="key" class="btn btn-lg special-char-btn first-btn" type="button">á</button>
    <button id="key" class="btn btn-lg special-char-btn" type="button">é</button>
    <button id="key" class="btn btn-lg special-char-btn" type="button">í</button>
    <button id="key" class="btn btn-lg special-char-btn" type="button">ó</button>
    <button id="key" class="btn btn-lg special-char-btn" type="button">ú</button>
    <button id="key" class="btn btn-lg special-char-btn" type="button">ü</button>
    <button id="key" class="btn btn-lg special-char-btn last-btn" type="button">ñ</button>
</div>

JS

function toggler(divId) {
    $("#" + divId).toggleClass("hidden show");
}

$(function(){
    var $write = $('#word');

    $('#key').click(function(){
    var $this = $(this),
        character = $this.html();
        $write.html($write.html() + character);
     });
});

但是，我肯定做錯了什么，因為上面的代碼似乎什么也沒做。 有人可以幫我解決嗎？

更新 ：正如sandeep s在下面的回答中所建議的那樣，我從按鈕中刪除了key ID，而是添加了一個新的類spl-key 。 HTML現在看起來像這樣：

<div class="input-group col-md-4 col-md-offset-4">
    <input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg">
    <a href="javascript:;" onclick="toggler('virtualkeypad');"><span class="fa fa-keyboard-o fa-2x lookup-icon"></span></a>
    <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button" id="lookup">Lookup</button></span>
</div>

<div id="virtualkeypad" class="col-md-offset-4 hidden">
    <button class="spl-key btn btn-lg special-char-btn first-btn" type="button">á</button>
    <button class="spl-key btn btn-lg special-char-btn" type="button">é</button>
    <button class="spl-key btn btn-lg special-char-btn" type="button">í</button>
    <button class="spl-key btn btn-lg special-char-btn" type="button">ó</button>
    <button class="spl-key btn btn-lg special-char-btn" type="button">ú</button>
    <button class="spl-key btn btn-lg special-char-btn" type="button">ü</button>
    <button class="spl-key btn btn-lg special-char-btn last-btn" type="button">ñ</button>
</div>

我還按照建議將腳本更改為：

function toggler(divId) {
    $("#" + divId).toggleClass("hidden show");
}
$(function(){
    $('.spl-key').click(function(e){
        $(e.target).toggleClass("hidden");
        character = $(e.target).text();
        $('#word').val(character);
     });
});

但是，問題仍然存在，並且按鈕單擊仍然像以前一樣無響應。

Answer 1

這應該是您的實現：

$(function(){
    $('.btn-lg').click(function(e){
        $(e.target).toggleClass("hidden");
        character = $(e.target).text();
        $('#word').val(character);
     });
});