CODEWITHSUNDEEP
javascriptjqueryhtml
Cody Guldner
Cody Guldner

Reputation: 2886

Append to element is not working

I have the following 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>

with the following javascript:

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

What I want to have happen is when I click on one of the list items, I want the data-letter to insert itself into the input, sorta like an onscreen keyboard. But it isn't working. Can someone help me?

Here is a Fiddle

Update

This works now

My next problem is the uppercase button. When I click the button, the characters turn to uppercase. How would I use the data to inject an uppercase letter into the input?

The final problem is the first row of letters won't inject into the input. How do I fix this?

Upvotes: 1

Views: 273

Answers (5)

Cody Guldner
Cody Guldner

Reputation: 2886

This is the solution I came up with

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

Instead of having the data-letter attribute for every single list-item, I got the text using this function, and appended it on click. This now also accounts for the uppercase letters as well.

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

Try:

Demo

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

Upvotes: 1

Teddy
Teddy

Reputation: 1417

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

var data = this.dataset.letter;

Upvotes: 0

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

Try the below

Enable Jquery file instead of mootools in the fiddle

Thanks

Upvotes: 2

mash
mash

Reputation: 15229

All you have to do is remove the margin on the .input element (it's offscreen for me), and enable jquery on the jsfiddle. After that it works fine for me.

Upvotes: 0

Related Questions