Html 用户单击按钮时如何向文本区域添加文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17816924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add text to textarea when user clicks a button
提问by user2360906
I want to add text to textarea when user clicks a button.I know how to concate string and add it to textarea but what i want is to add text to the place/position inside textarea where users clicks and then add text in that position on clicking button.
我想在用户单击按钮时向 textarea 添加文本。我知道如何连接字符串并将其添加到 textarea 但我想要的是将文本添加到用户单击的 textarea 内的位置/位置，然后在该位置添加文本单击按钮。
Thanks in advance
提前致谢
回答by Oki Erie Rinaldi
Here's a reference from me:
这是我的参考：
<script>
function input(){
var text = "here the text that you want to input.";
document.forms.form1.area.value = text;
}
</script>
<form name='form1'>
Click<input onclick='input()' type='button' value='BUTTON' id='button'><br>
<textarea name='area'></textarea>
</form>
that an example that showing when a button clicked, a row of text added to textarea.
why do i added javascript in it? because html attributes only is not enough to make it.
may it help :D
这是一个示例，显示单击按钮时，将一行文本添加到 textarea。为什么我在其中添加了 javascript？因为只有 html 属性是不够的。
它可以帮助：D
回答by Leonardo Hernandez
You need to add text at specific position (at caret position) into the text area when you click on a button. Try the following:
单击按钮时，您需要将特定位置（插入符号位置）的文本添加到文本区域中。请尝试以下操作：
var position;
function getCaretPosition() {
var ctlTextArea = document.getElementById('textArea');
position = ctlTextArea.selectionStart;
return position;
}
/* Needs JQuery */
$(document).ready(function () {
jQuery.fn.extend({
insertAtCaret: function (myValue) {
return this.each(function (i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
})
}
});
$('#btnTest').click(function () {
$("#textArea").insertAtCaret(' << inserted text! >> ');
});
});<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>How to add text to textarea when user clicks a button</title>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
// The javascript code goes here...
</script>
<body>
<h1>How to add text to textarea when user clicks a button</h1>
<div id="divDroppedFields">
<textarea id="textArea" name="txtMessageFields" class="required" cols="80" rows="10" onclick="getCaretPosition()" onkeyup="getCaretPosition()">
In the meantime the cat slowly recovered. The socket of the lost eye presented, it is true, a frightful appearance, but he no longer appeared to suffer any pain.
</textarea>
</div>
<button id="btnTest">CLICK ME</button>
</body>
</html>回答by da-hype
here is a simple way using JQuery.
这是使用JQuery的简单方法。
your html
你的html
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />
Your Jquery
你的jQuery
$(document).ready(function(){
$("#add").click(function(){
$('#txtarea').html('test');
});
});
you can see it in action here
你可以在这里看到它的实际效果
