Use javascript to insert letters

Is there a way to use javascript to insert a letter in a textarea via onClick? The letters dont need to be fancy, just basic. I have no code to show because I dont even know where t开发者_StackOverflow中文版o begin. Maybe a clickable div?

EDIT: how can i insert letters into a textarea with already typed words? I do not want to erase what is already in there

Simple:

HTML:

<textarea id="input"></textarea>
<button onclick="makeTextAppear();">Presto!</button>

JavaScript:

function makeTextAppear() {
    var text = document.getElementById('input');
    text.value = "Hello World";
}

Provided you have button elements of which their text node is the character.

var buttons = document.getElementById('chars').getElementsByTagName('button'),
    textarea = document.getElementById('char-list');

for (var i = 0, length = buttons.length; i < length; i++) {
    buttons[i].onclick = function() {
        textarea.value += buttons[i].textContent || buttons[i].innerText;
    }
}

Alternatively for the text node you could access buttons[i].firstChild.data.

You can replace the contents of a textarea easily enough with whatever you want. In your function:

var text = this.value;
text.replace('mom','mother'); // Replace 'mom' with 'mother'
text += "And add some text at the end";
text = "And maybe add text at the beginning" + text;
this.value = text; // And finally replace it

Simple:

<textarea name="field" id="field"></textarea>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.
</div>

<input type="button" value="Button" onclick="document.getElementById('field').innerHTML = document.getElementById('content').innerHTML" />

Here a like something to get you started:

HTML : 
<input type="button" value="A" />
<input type="button" value="B" />
<input type="button" value="C" />
<input type="button" value="D" />
<textarea id="toBeFill"></textarea>

Javascript using JQuery:
$("input[type=button]").live('click',function(){ $('#toBeFill').text($('this').val()); })

First add an onclick handler to the div as

<div id="yourID" onclick="funct1();"

here funct1 is the function that will be called upon clicking. Inside funct1, do whatever you want to do.

To edit the text value, use the function

function editTextNode(textNode,text,pos){
    var val=textNode.nodeValue;
    if(pos=="END"){  pos=val.length; }  //add at end of existing text
    val=val.slice(0,pos) + text + val.slice(pos);   //*
    textNode.nodeValue=val;
}

This way you can edit it anyway you like. All you have to do is get the textnode and call this function. In case you want to add just at the end, you can remove all statements contining pos and replace the statement marked * with val+=text