[英]Javascript writing into a text area from button clicked
我想从用户使用Javascript 或jQuery单击的按钮写入文本区域
像这样：
<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>
因此，用户可以单击此处的“ QWERTY”按钮之一，并将其粘贴到下面的框中。 有没有相对简单的方法可以做到这一点？ 我在网上查找了一些示例，但对于像我这样的新手来说，它们全都太过分了。
如果我们可以将文本写入button上没有的textarea字符，那也很好
我似乎无法使它正常工作
<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>
如果您只想追加到文本区域的末尾，请使用
$('button').on('click', function(){
var letter = $(this).text();
$('textarea')[0].value += letter;
});
完整演示
$(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>
$('button').click(function(){
$('textarea').text($('textarea').text() + $(this).text());
//$('input:text').val($('textarea').text() );
$('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});
<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>
单击所有按钮后，按OP更新需要附加附加值。
每个OP再次更新，询问“将与按钮标签不同的字母写到文本框中”。 我想使用data（）获取每个按钮的一些数据。
这个怎么样：
$('button').click(function(){
$('textarea').text( $(this).text() );
});
如果您想进一步举例说明，我们可以做到，以便将字母追加到文本区域，而不是覆盖以前的内容：
var ta = $('textarea'); //cache selector for re-use (see note at bottom)
$('button').click(function(){
ta.text( ta.text() + $(this).text() );
});
现在，让我们添加一个按钮以删除文本区域。 在这里，我们为一个特定的按钮分配一个ID并检查它：
var ta = $('textarea');
$('button').click(function(){
if (this.id == "eraseit"){
ta.text('');
}else{
ta.text( ta.text() + $(this).text() );
}
});
笔记：
cached了选择器（将引用保存到变量中）以提高速度。 每次点击代码$('textarea') ，都会在DOM中搜索该选择器。 缓存选择器会消除除初始搜索之外的所有内容。 在这个简单的示例中根本不重要，但是在大型项目中非常有用。
可以将相同的类名称应用于多个元素（例如，多个按钮可以具有该类），但是不允许两个元素具有相同的ID。
针对您的问题：
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() );
}
}
});
Javascript RTF编辑器，单击按钮后，内容可编辑区域失去焦点
[英]Javascript rich text editor, contenteditable area loses focus after button is clicked
当通过JavaScript单击按钮时，如何用iframe替换内容区域？
[英]How to replace content area with an iframe when a button is clicked, via javascript?
单击输入区域（多次输入）时自动复制文本
[英]Automatically copy text when clicked on input area (multiple lnputs) Javascript
编写1条JavaScript语句，该语句将从文本框中获取文本，并在单击按钮时使用它来设置段落的边框
[英]Write 1 JavaScript Statement that will take text from the text boxes and use it to set the border of the paragraph when the button is clicked
在JavaScript中单击按钮时，按钮文本和属性值会更改
[英]Button text and property value change when button is clicked in JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.