Javascript writing into a text area from button clicked
Question
I'm wanting to write into a textarea from buttons clicked by users using Javascript or jQuery
Like so:
<html>
<head></head>
<body>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<br/><br/>
<textarea></textarea>
</body>
</html>
So a user can click one of the "QWERTY" buttons here and it will be pasted into the box below. Is there a relatively simple way to do this? I've looked up some examples online, but they all go overboard for a novice like me.
It would also be great if we could write text to the textarea characters that aren't on the button
I can't seem to get this to work
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>$('button').click(function(){
$('textarea').text($('textarea').text() + $(this).text());
//$('input:text').val($('textarea').text() );
$('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});
</script>
</head>
<body>
<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>
<input type='text'/>
<br/><br/>
<textarea></textarea>
</body>
</html>
3 answers
solution1
2 2015-03-05 00:59:56
If you want to just append to the end of the textarea then use
$('button').on('click', function(){
var letter = $(this).text();
$('textarea')[0].value += letter;
});
Full demo
$(function() { $('button').on('click', function() { var letter = $(this).text(); $('textarea')[0].value += letter; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button>Q</button> <button>W</button> <button>E</button> <button>R</button> <button>T</button> <button>Y</button> <br/> <br/> <textarea></textarea>
solution2
1 ACCPTED 2015-03-05 00:58:33
JS
$('button').click(function(){
$('textarea').text($('textarea').text() + $(this).text());
//$('input:text').val($('textarea').text() );
$('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});
HTML
<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>
<input type='text'/>
<br/><br/>
<textarea></textarea>
Updated per OP needs additional appending values after all the button clicked.
Updated again per OP asking "write into the textbox a letter that is different from the button tag says". I would like to store some data for each button using data() to get it.
FIDDLE
solution3
1 2015-03-05 00:58:54
How about this:
$('button').click(function(){
$('textarea').text( $(this).text() );
});
If you want to take this example a bit futher, we can make it so the letters are appended to the textarea, rather than overwriting what was there previously:
var ta = $('textarea'); //cache selector for re-use (see note at bottom)
$('button').click(function(){
ta.text( ta.text() + $(this).text() );
});
Now, let's add a button to erase the textarea. Here we assign an ID to one specific button and check for it:
var ta = $('textarea');
$('button').click(function(){
if (this.id == "eraseit"){
ta.text('');
}else{
ta.text( ta.text() + $(this).text() );
}
});
Notes:
- In the 2nd and 3rd examples, we
cachedthe selector (saved the reference into a variable) for speed.
Each time the code $('textarea') is hit, the DOM is searched for that selector. Caching the selector eliminates all but the initial search. Not at all important in this simple example, but very useful on a large project.
- IDs and Classes are extremely important. They are used similarly by css and by javascript/jQuery, for identifying/selecting elements.
The same class name can be applied to multiple elements (eg several buttons can have the class), but no two elements are allowed to have the same ID.
In response to your question:
var ta = $('textarea');
$('button').click(function(){
if (this.id == "eraseit"){
ta.text('');
}else{
if ( $(this).hasClass('bob') ) {
ta.text( ta.text() + ' bob' );
}else if ( $(this).hasClass('x') ) {
var ans = prompt('What is your name?');
ta.text( ta.text() + ans );
}else{
ta.text( ta.text() + $(this).text() );
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.