附加到元素不工作

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

這是我想出了

解決方案

我沒有爲每個列表項目設置data-letter屬性，而是使用此功能獲得文本，並在點擊後添加它。現在這也佔大寫字母。

Answer 2

嘗試：

Demo

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

Answer 3

所有你需要做的就是刪除。輸入元素的保證金（它的屏幕之外對我來說），並開啓的jsfiddle jQuery的。之後，它對我來說工作得很好。

Answer 4

嘗試以下

啓用jQuery的文件，而不是在mootools的小提琴

感謝

Answer 5

不知道爲什麼jQuery的。數據（）無法正常工作，但您可以使用下面的「this.dataset。 XXX」

var data = this.dataset.letter;