如何在文本字段中制作按钮插入标签？答案

【问题标题】：how to make button insert tag in a textfield?如何在文本字段中制作按钮插入标签？
【发布时间】：2013-06-26 19:35:34
【问题描述】：

我正在尝试制作多个按钮，当单击它们时，它们会将 和 之类的标签添加到文本字段中。我已经想出了如何让它像这样工作：

<script>
function addtxt(input) {
    var obj=document.getElementById(input)
    obj.value+="<p></p>"
}
</script>

<input type="button" value="<p></p>" onclick="addtxt('body')">

但不是为每个不同的按钮设置多个脚本，我想知道是否有一种 JS 方法将元素 value 用作 obj.value。有可能吗？

编辑：我在网上找到了这个更好的其他代码，我怎样才能让这个新代码使用元素 value，有什么办法吗？

function boldText(textAreaId, link) 
{
    var browser=navigator.appName
    var b_version=navigator.appVersion

    if (browser=="Microsoft Internet Explorer" && b_version>='4')
    {
        var str = document.selection.createRange().text;
        document.getElementById(textAreaId).focus();
        var sel = document.selection.createRange();
        sel.text = "<b>" + str + "</b>";
        return;
    }

    field = document.getElementById(textAreaId);
    startPos = field.selectionStart;
    endPos = field.selectionEnd;
    before = field.value.substr(0, startPos);
    selected = field.value.substr(field.selectionStart, (field.selectionEnd - field.selectionStart));
    after = field.value.substr(field.selectionEnd, (field.value.length - field.selectionEnd));
    field.value = before + "<b>" + selected + "</b>" + after;
}

【问题讨论】：

您要放置新标签吗？
到一个名为 body 的文本区域

标签： javascript textarea add

【解决方案1】：

您可以将this 传递给您的onclick 处理程序，然后在您的函数中访问它的值：

<script>
function addtxt(input, button) {
    var obj=document.getElementById(input);
    obj.value+=button.value;
}
</script>

<input type="button" value="<p></p>" onclick="addtxt('body', this)">
<input type="button" value="<b></b>" onclick="addtxt('body', this)">

【讨论】：

这对我有用，但我找到了一个新代码，无论如何都要对新代码做同样的事情吗？
无需为每个按钮传递this，您只需将标签名称作为字符串传递并在函数中构建您的标签。 <input type="button" value="" onclick="addtxt('body', 'p')"> 在你的函数结束时，让它构建开始和结束标签：field.value = before + "<" + tagName + ">" + selected + "</" + tagName + ">" + after;
您介意为新手多解释一下吗？我应该用tagName换什么东西吗，我按照你说的做了，它返回“未定义”
您还需要更改函数的参数名称。看起来应该是function addtxt(textAreaId, tagName)

【解决方案2】：

这是一个带有特定 div 的示例，它接收 javascript 生成的代码。我不建议将它添加到带有id 正文的div，因为该词是为html 结构元素保留的，所以我将目标div 称为“addHere”。

Javascript

function addtxt(e) {
    console.log(e)
   var dest = document.getElementById("addHere");
   dest.innerHTML = e.value;

}

HTML

<input type="button" value="<p>Text</p>" onclick="addtxt(this)">
<div id="addHere"></div>

fiddle here

【讨论】：