单击按钮将Java语言写入文本区域
[英]Javascript writing into a text area from button clicked
问题描述
I'm wanting to write into a textarea from buttons clicked by users using Javascript or jQuery 
我想从用户使用Javascript 或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. 因此，用户可以单击此处的“ QWERTY”按钮之一，并将其粘贴到下面的框中。 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 如果我们可以将文本写入button上没有的textarea字符，那也很好
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 个解决方案
解决方案1
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>
解决方案2
1 已采纳 2015-03-05 00:58:33
JS 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 的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. 单击所有按钮后，按OP更新需要附加附加值。
Updated again per OP asking "write into the textbox a letter that is different from the button tag says". 每个OP再次更新，询问“将与按钮标签不同的字母写到文本框中”。 I would like to store some data for each button using data() to get it. 我想使用data（）获取每个按钮的一些数据。
FIDDLE 小提琴
解决方案3
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: 在这里，我们为一个特定的按钮分配一个ID并检查它：
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.在第二个和第三个示例中，我们cached了选择器（将引用保存到变量中）以提高速度。
Each time the code $('textarea') is hit, the DOM is searched for that selector. 每次点击代码$('textarea') ，都会在DOM中搜索该选择器。 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. ID和类非常重要。 They are used similarly by css and by javascript/jQuery, for identifying/selecting elements. CSS和javascript / jQuery相似地使用它们来标识/选择元素。
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. 可以将相同的类名称应用于多个元素（例如，多个按钮可以具有该类），但是不允许两个元素具有相同的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() );
}
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.