javascript - 附加到元素不起作用

Question

我有以下 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>

使用以下 javascript：

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

我想要发生的是当我单击其中一个列表项时，我希望数据字母将自身插入输入中，有点像屏幕键盘。但它不起作用。有人能帮我吗？

这是一个小提琴

更新

这现在有效

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

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

Answer 1

试试下面

在小提琴中启用 Jquery 文件而不是 mootools

谢谢

Answer 2

尝试：

演示

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

Answer 3

Not sure why jquery .data() not work, but you can use below "this.dataset.xxx"

var data = this.dataset.letter; 

Answer 4

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

Answer 5

这是我想出的解决方案

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);
  }
});

data-letter我没有使用每个列表项的属性，而是使用此函数获取文本，并在单击时附加它。现在这也解释了大写字母。