Append to element is not working

Question

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?

Sridhar Narasimhan · Accepted Answer · 2012-12-10 04:24:00Z

2

Try the below

Enable Jquery file instead of mootools in the fiddle

Thanks

answered Dec 10, 2012 at 4:24

Sridhar Narasimhan

2,6532 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akhil Sekharan · Accepted Answer · 2012-12-10 05:03:25Z

1

Try:

Demo

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

edited Dec 10, 2012 at 5:03

answered Dec 10, 2012 at 4:21

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

2 Comments

mash Over a year ago

jsfiddle.net/LvHRr/25 this works fine with append, might as well keep it with append...

nnnnnn Over a year ago

I would've said that for a textarea really you should be using .val() rather than .html() or .append().

mash · Accepted Answer · 2012-12-10 04:21:06Z

0

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.

answered Dec 10, 2012 at 4:21

mash

15.3k3 gold badges32 silver badges36 bronze badges

Comments

Teddy · Accepted Answer · 2012-12-10 04:45:06Z

0

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

var data = this.dataset.letter;

answered Dec 10, 2012 at 4:45

Teddy

1,42710 silver badges19 bronze badges

Comments

Cody Guldner · Accepted Answer · 2013-04-14 20:03:05Z

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.

Collectives™ on Stack Overflow

Append to element is not working

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Related