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

Question

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

我们的一个网络系统有一个在线表格来提交会议的科学论文。在那里我们有一个下拉菜单来插入特殊字符。每个客户和发布商的特殊字符都有所不同，所以我们必须这样做。

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

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

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

jsFiddle

这是生成的HTML（网页获得从传统的ASP dinamically产生的，有很多的遗留代码在这里）。

<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

你的问题是，当下拉获得焦点，textarea的选择是在IE丢失。你需要在textarea失去焦点之前保存选择。在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); 
    }); 
});