[英]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.