尝试使用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);
     });
});