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); 
    }); 
});