Javascript “附加到”元素不起作用

我有以下HTML：

<textarea class="input" placeholder="Tap to enter message" maxlength="160"></textarea>
<div class="keyboard">
<ul id="special">
    <li data-letter="!">!</li>
    <li data-letter="?">?</li>
    <li data-letter=",">,</li>
    <li data-letter=":">:</li>
    <li data-letter=";">;</li>
</ul>

<ul id="first">
    <li data-letter="q">q</li><li>1</li>
    <li data-letter="w">w</li><li>2</li>
    <li data-letter="e">e</li><li>3</li>
    <li data-letter="r">r</li><li>4</li>
    <li data-letter="t">t</li><li>5</li>
    <li data-letter="y">y</li><li>6</li>
    <li data-letter="u">u</li><li>7</li>
    <li data-letter="i">i</li><li>8</li>
    <li data-letter="o">o</li><li>9</li>
    <li data-letter="p">p</li><li>0</li>    
</ul>

<ul id="second">
    <li data-letter="a">a</li>
    <li data-letter="s">s</li>
    <li data-letter="d">d</li>
    <li data-letter="f">f</li>
    <li data-letter="g">g</li>
    <li data-letter="h">h</li>
    <li data-letter="j">j</li>
    <li data-letter="k">k</li>
    <li data-letter="l">l</li>              
</ul>

<ul id="third">
    <li id="caps" class="pointer">&#8679;<span id="underline" class="color">_</span></li>
    <li data-letter="z">z</li>
    <li data-letter="x">x</li>
    <li data-letter="c">c</li>
    <li data-letter="v">v</li>
    <li data-letter="b">b</li>
    <li data-letter="n">n</li>
    <li data-letter="m">m</li>
    <li><img src="backspace.png"></li>
</ul>

<ul id="fourth">
    <li class>?123</li>
    <li>,</li>
    <li>&emsp;</li>
    <li>.</li>
    <li><img src="search.png"></li>
</ul>

我想做的是，当我点击其中一个列表项时，我希望数据字母插入到输入中，就像屏幕上的键盘一样。但它不起作用。有人能帮我吗

更新

我的下一个问题是大写按钮。当我点击按钮时，字符变成大写。如何使用数据将大写字母插入输入

最后一个问题是第一行字母不会注入到输入中。如何解决此问题？

请尝试：

---

您所要做的就是删除.input元素上的边距（对我来说是屏幕外的），并在JSFIDLE上启用jquery。在那之后，它对我来说很好。

试试下面的方法

在fiddle中启用Jquery文件而不是mootools

谢谢

我不知道为什么jquery.data（）不起作用，但您可以使用下面的“this.dataset.xxx”

---

这就是我想出的解决办法

keys = $(".keyboard ul li");
keys.on("click", function() {
  var let = $(this).text(),
    upperlet = let.toUpperCase(),
    lowerlet = let;
  if (keys.hasClass("uppercase")){
    input.append(upperlet);
  }else {
    input.append(lowerlet);
  }
});

---

我没有为每个列表项设置

数据字母

属性，而是使用此函数获取文本，并在单击时附加它。这也解释了大写字母。

这在append中很好用，也可以在append中保留它……我想说的是，对于文本区域，你应该使用

.val（）

，而不是

.html（）

或

.append（）

。

$('.keyboard ul li').click(function() {
    var data = $(this).data('letter');
    $('.input').val( $('.input').val()+ data);
});​

var data = this.dataset.letter; 

keys = $(".keyboard ul li");
keys.on("click", function() {
  var let = $(this).text(),
    upperlet = let.toUpperCase(),
    lowerlet = let;
  if (keys.hasClass("uppercase")){
    input.append(upperlet);
  }else {
    input.append(lowerlet);
  }
});