1

私は次の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);
});

私がしたいのは、リスト項目の1つをクリックしたときに、データ文字が画面キーボードのように入力に挿入されるようにすることです。しかし、それは機能していません。誰かが私を助けることができますか？

これがフィドルです

アップデート

これは今動作します

次の問題は大文字のボタンです。ボタンをクリックすると、文字が大文字になります。データを使用して入力に大文字を挿入するにはどうすればよいですか？

最後の問題は、文字の最初の行が入力に挿入されないことです。これを修正するにはどうすればよいですか？

4

5 に答える 5

2

以下をお試しください

フィドルでmootoolsの代わりにJqueryファイルを有効にする

ありがとう

于 2012-12-10T04:24:00.567 に答える
1

試す：

デモ

$('.keyboard ul li').click(function() {
    var data = $(this).data('letter');
    $('.input').val( $('.input').val()+ data);
});​
于 2012-12-10T04:21:05.093 に答える
0

あなたがしなければならないのは、.input要素のマージンを削除し（私にとってはオフスクリーンです）、jsfiddleでjqueryを有効にすることです。その後、それは私にとってはうまくいきます。

于 2012-12-10T04:21:06.637 に答える
0

jquery .data（）が機能しない理由はわかりませんが、以下の「this.dataset.xxx」を使用できます。

var data = this.dataset.letter;
于 2012-12-10T04:45:06.360 に答える
0

これは私が思いついた解決策です

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すべてのリストアイテムの属性を持つ代わりに、この関数を使用してテキストを取得し、クリック時に追加しました。これにより、大文字も考慮されるようになりました。

于 2013-04-14T20:03:05.953 に答える