如何在值中主动选择文本的特定部分？

Question

我正在将对象的文本值复制到textarea。我在我正在复制的文本之前和之后放置了一些其他文本。问题是，如果我需要在两者之间选择文本（我的意思是作为文本的活动部分突出显示），我不知道该怎么办这是我的代码，对不起我的英文：

            <form id="form" method="POST">

                    <div id="bold" value="BOLD"></div>
                    <textarea class="text_article" name="content" placeholder="Article text"></textarea><br/> 
            <script>
                    $("#form").on("click", "div", function() {
                    var content = $(this).attr("value");

                    $(".text_article").val($(".text_article").val() + "<b>" );
                    $(".text_article").val($(".text_article").val() + content ); 
                    $(".text_article").val($(".text_article").val() + "</b>" );
                });  
            </script> 

Answer 1

这可能是你想要的： 的 Fiddle

<强> HTML

<form id="form" method="POST">
<br/>
<span class="style_text">
    <div id="bold" value="BOLD TEXT">CLICK</div>
    <textarea class="text_article" name="content"></textarea><br/> 
</span>

<强> CSS

.bold{
    font-weight:bold;
}

<强>的jQuery

$(".style_text").on("click", "div", function() {
    var content = $(this).attr("value");
    $(".text_article").val($(".text_article").val() + content).select(); 
    $("textarea").addClass("bold");
});  

Answer 2

根据您的JSFiddle，如果您只想选择变量content的内容而不添加您要附加的字符串，则可以执行以下操作：

$(".style_text").on("click", "div", function() {
    var content = $(this).attr("value");
    var startSelectionIndex = $(".text_article").val().length + 3;
    $(".text_article").val($(".text_article").val() +"<b>" + content + "</b>");
    $(".text_article")[0].setSelectionRange(startSelectionIndex, content.length + startSelectionIndex);
    $(".text_article")[0].focus();
});  

这是an example。