Javascript 尝试使用JS在引导中创建虚拟键盘

有一个带有虚拟键盘的简单文本框，当用户单击文本框内的键盘图标时，该文本框可进行输入和输出切换：

每个字母都是一个可点击的按钮，其目的是用被点击按钮的值填充文本框。以下是我所做的：

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>

但是，我一定是做错了什么，因为上面的代码似乎什么都没做。谁能帮我修一下吗

更新：正如sandeep s在下面的回答中建议的那样，我从按钮中删除了

键

ID，并添加了一个新的class

spl键

。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(){
    $('.btn-lg').click(function(e){
        $(e.target).toggleClass("hidden");
        character = $(e.target).text();
        $('#word').val(character);
     });
});

---

真是大错特错！您不能在

id

字段上注册多个单击事件，请使用像

btn lg

这样的公共类，而不是将文本添加到您不使用

html（）

但

val（）

的输入框中。这是您想要的吗？谢谢你的回复。我更正了代码并更新了我的问题。这个问题似乎仍然存在。请参考以上问题的更新。这是我遇到的最奇怪的事情！它在你的小提琴上起作用，但在我的网站上却不起作用！：（请确保在这种情况下包含jQuery:）我当然有。我的网站上有大量其他jQuery代码片段，所有这些都工作得很好。除了这个。唉……在这种情况下，

console.log

是你新的最好的朋友：P

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

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