1

誰かがこの問題で私を助けてくれることを願っています。

私たちのウェブシステムの1つには、会議用の科学論文を提出するためのオンラインフォームがあります。そこに特殊文字を挿入するためのドロップダウンがあります。特殊文字はクライアントや発行元によって異なるため、このようにする必要があります。

私たちが直面している問題はIE8とIE9にあり、他のすべてのブラウザーは正常に動作します。

この2つのブラウザのいずれかで、ドロップダウンを使用して特殊文字を挿入すると、カーソル位置に文字を挿入する代わりに、ランダムな位置に特殊文字が追加されます。

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

1 に答える 1

3

あなたの問題は、ドロップダウンがフォーカスを取得すると、IEでテキストエリアの選択が失われることです。textareaがフォーカスを失う前に、選択範囲を保存する必要があります。IEでは、blurイベントは遅すぎます。プロプライエタリを使用する必要がありますbeforedeactivate。

質問にjQueryのタグを付けたので、jQueryプラグインを使用して例を簡単にすることをお勧めしますが、プラグイン内のほとんどすべてのコードをStackOverflowのスタンドアロン関数として公開しました。

デモ： 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);
    });
});
于 2013-01-22T15:54:48.867 に答える