JavaScript - 在光标位置插入字符 IE8 和 IE9

Question

我希望有人能帮助我解决这个问题。

我们的一个网络系统有一个在线表格，可以为 session 提交科学论文。在那里我们有一个下拉列表来插入特殊字符。特殊字符因客户和发布者而异，因此我们必须这样做。

我们面临的问题是在 IE8 和 IE9 中，所有其他浏览器都可以正常工作。

在这两种浏览器中的任何一种中，如果我们使用下拉菜单插入特殊字符，它会将其添加到随机位置，而不是将字符插入光标位置。

我已经创建了一个 jsfiddle，但如果你运行它，它就会工作。如果您将这两个文件保存在本地并尝试在 IE8 或 IE9 上运行，它不会。

jsFiddle

这是生成的 html(页面是从经典的 asp 动态生成的，这里有很多遗留代码)。

<TR>
  <TH ALIGN="LEFT" COLSPAN="5" WIDTH="100%">Page 2 of 4 Abstract details:</TH>
</TR>
<TR>
  <TD COLSPAN="5">
    <HR>
  </TD>
</TR>
<TR>
  <TH ALIGN="LEFT" COLSPAN="5">Abstract Title (max 150 char):</TH>
</TR>
<TR>
  <TD ALIGN="LEFT" COLSPAN="5"></TD>
</TR>
<TR>
  <TD COLSPAN="5">
    <SELECT NAME="AbstractTitleChar" id="AbstractTitleChar">
      <OPTION VALUE="">--- Insert character ---</OPTION>
      <OPTION VALUE="<alpha>">&alpha; Alpha</OPTION>
      <OPTION VALUE="<beta>">&beta; Beta</OPTION>
      <OPTION VALUE="<cent>">&cent; Cent</OPTION>
      <OPTION VALUE="<copyright>">&copy; Copyright</OPTION>
      <OPTION VALUE="<dagger>">&dagger; Dagger</OPTION>
      <OPTION VALUE="<degree>">&deg; Degree</OPTION>
      <OPTION VALUE="<delta>">&delta; Delta</OPTION>
      <OPTION VALUE="<delta1>">&Delta; Delta</OPTION>
      <OPTION VALUE="<DoubleDagger>">&Dagger; Double Dagger</OPTION>
      <OPTION VALUE="<eacute>">&#233; e-acute accent</OPTION>
      <OPTION VALUE="<epsilon>">&epsilon; Epsilon</OPTION>
      <OPTION VALUE="<gamma>">&gamma; Gamma</OPTION>
      <OPTION VALUE="<greater>">&gt; Greater than</OPTION>
      <OPTION VALUE="<GreaterThanEqualTo>">&#8805; Greater Than Equal To</OPTION>
      <OPTION VALUE="<less>">&lt; Less than</OPTION>
      <OPTION VALUE="<micro>">&micro; Micro</OPTION>
      <OPTION VALUE="<omega>">&omega; Omega</OPTION>
      <OPTION VALUE="<plusminus>">&plusmn; Plus-Minus</OPTION>
      <OPTION VALUE="<pound>">&pound; Pound</OPTION>
      <OPTION VALUE="<registered>">&reg; Registered</OPTION>
      <OPTION VALUE="<SectionSign>">&sect; Section Sign</OPTION>
      <OPTION VALUE="<rho>">&rho; Small 'P'</OPTION>
      <OPTION VALUE="<sum>">&sum; Sum</OPTION>
      <OPTION VALUE="<sunny>">&sunny sunny</OPTION>
      <OPTION VALUE="<trade>">&trade; Trademark</OPTION>
      <OPTION VALUE="<yen>">&yen; Yen</OPTION>
    </SELECT>
    <SELECT NAME="TitleFormatting">
      <OPTION VALUE="">--- Insert formatting ---</OPTION>
      <OPTION VALUE="<B>">Bold start</OPTION>
      <OPTION VALUE="</B>">Bold end</OPTION>
      <OPTION VALUE="<I>">Italic start</OPTION>
      <OPTION VALUE="</I>">Italic end</OPTION>
      <OPTION VALUE="<BR>">Line break</OPTION>
      <OPTION VALUE="<P>">New paragraph</OPTION>
      <OPTION VALUE="<startsub>">Subscript start</OPTION>
      <OPTION VALUE="<endsub>">Subscript end</OPTION>
      <OPTION VALUE="<startsup>">Superscript start</OPTION>
      <OPTION VALUE="<endsup>">Superscript end</OPTION>
      <OPTION VALUE="<U>">Underline start</OPTION>
      <OPTION VALUE="</U>">Underline end</OPTION>
    </SELECT>
    <input type="hidden" name="Max_Title_Char" value="100" />
    <input type="hidden" name="Max_Text_Char" value="200" />
    <input type="hidden" name="Max_Tables" value="0" />
    <input type="hidden" name="Max_Images" value="0" />
    <input type="hidden" name="Max_Extra_Text_Char" value="100" />
    <BR>
    <TEXTAREA CLASS="title" id="AbstractTitle" NAME="Abstract_Title" COLS="80"
    ROWS="3">Crap's Title</TEXTAREA>
    <BR>Character count
    <INPUT TYPE="TEXT" READONLY id="CharCountTitle">&nbsp;&nbsp;
     <FONT COLOR="RED"><B>(maximum: 100)</B></FONT>
<INPUT TYPE="BUTTON" CLASS="button" NAME = "countTitle" VALUE="Count"></TD>
</TR>
</TABLE>

这是javascript

function insertAtCaret(areaId, text) {
  var txtarea = document.getElementById(areaId);

  var scrollPos = txtarea.scrollTop;
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false));

  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") strPos = txtarea.selectionStart;
  //alert(strPos);
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  //alert(txtarea.value.length);
  txtarea.value = front + text + back;
  strPos = strPos + text.length;
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    range.moveEnd('character', 0);
    range.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }
  txtarea.scrollTop = scrollPos;
}

$(document).ready(function () {

  $('select#AbstractTitleChar').change(function () {

    var insertVal = $(this).val();
    var targetVal = $('textarea#AbstractTitle').val();
    insertAtCaret('AbstractTitle', insertVal);
  });
});

Answer 1

您的问题是，当下拉菜单获得焦点时，文本区域选择在 IE 中丢失。您需要在文本区域失去焦点之前保存选择。在 IE 中，blur 事件为时已晚:您需要使用专有的 beforedeactivate。

既然你已经用 jQuery 标记了你的问题，我建议使用 my jQuery plugin为了简化示例，尽管我之前已经在 Stack Overflow 上将插件中的几乎所有代码作为独立函数发布。

演示:http://jsfiddle.net/d7C6g/3/

代码:

$(document).ready(function () {
    var textarea = $("#AbstractTitle");
    var sel;

    // IE specific event
    textarea.on("beforedeactivate", function() {
        textareaSelection = textarea.getSelection();
    });

    $('select#AbstractTitleChar').change(function() {
        var insertVal = $(this).val();
        if (textareaSelection) {
            textarea.setSelection(textareaSelection.start, textareaSelection.end);
        }
        textarea.replaceSelectedText(insertVal);
    });
});