Question

我使用javascript和jQuery来设计评论框。

我的页面有textarea和3个按钮（粗体，下划线和斜体）。如果用户在textarea中键入文本，选择并单击任何按钮，则所选文本应变为粗体，带下划线或斜体（我有这个功能如下）。

我的问题是，在单击选中文本的按钮后，虽然正确插入了html标签，但选择将丢失。也就是说，当我输入：＆＃34;您好，我在这里。＆＃34;，选择＆＃34;我在这里＆＃34;然后单击粗体按钮。 我在这里变为粗体，但如果我还要强调或 italicise ，我必须重新选择文字。

所以，我的问题是：如何重新选择textarea中的所选文字？

我尝试myTextarea.select()，但此代码将选择textarea的全部内容，而不仅仅是所选文字。

更新

这是我到目前为止所得到的：

var mystring = ""; // default string

/* Bold event */
function Bold()
{
  var startString;
  var endString;
  var startPos; // starting position
  var endPos; // ending position
  var selectedText;
  var temp = document.getElementById("myTextarea");

  // check if text is selected
  if(temp.selectionStart !== undefined)
  {
    startPos = temp.selectionStart;
    endPos = temp.selectionEnd;
    selectedText = temp.value.substring(startPos, endPos);
    startString = temp.value.substring(0, startPos);
    endString = temp.value.substring(endPos, temp.value.length);
  }

  $("#myTextarea").val(startString + "[B]" + selectedText + "[/B]" + endString); // rewrite textarea value

  if(mystring !== "") // check if default string is NOT null, return null if it's the first clicked
  {
    mystring = mystring.replace(selectedText, "<b>" + selectedText + "</b>");
  }
  else
  {
    mystring = startString + "<b>" + selectedText + "</b>" + endString;
  }

  // write to preview panel
  $("#preview").html(mystring);
  $("#myTextarea").focus();
}

当我选择＆＃34;我在这里＆＃34;在textarea中单击粗体按钮，上面的代码会将[B]和[/B]插入预览面板中的textarea和<b>标记。

Answer 1

要重新选择您可以执行的文字：

temp.setSelectionRange(startPos, endPos + 6);

我添加了+ 6因为您要插入6个新字符，所以我正在扩展选择以包含它们。您还可以向startPos和endPos添加3（并让字符包装选择） - IMO这是较差的UX明智。

如何使用javascript / jQuery在textarea中重新选择所选文本？

1 个答案: