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

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

Here is a Fiddle

更新

This works now

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

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

Answer 1

尝试以下

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

由于

Answer 2

尝试：

Demo

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

Answer 3

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

Answer 4

不确定为什么jquery .data（）不起作用，但你可以使用下面的“this.dataset.xxx”

var data = this.dataset.letter;

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属性，而是使用此函数获取文本，并在单击时附加它。现在这也是大写字母的原因。

追加元素不起作用

5 个答案: