JavaScript を使用して TextBox コントロールから選択したテキストを取得する

テキストボックスを操作する場合、選択したテキストを取得する必要が生じる場合があります。この記事は、Internet Explorer 6 で発生する問題に対処し、このタスクに対する包括的な解決策を提供することを目的としています。

テキスト ボックス内のテキストの選択は、JavaScript の組み込みプロパティを使用して行うことができます。標準に準拠したブラウザの場合、selectionStart プロパティとselectionEnd プロパティは、選択されたテキストの範囲を提供します。ただし、Internet Explorer の場合は、選択オブジェクトを使用した回避策が必要です。

function ShowSelection() {
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined) { 
    // Standards-compliant version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  } else if (document.selection !== undefined) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: "   selectedText);
}

当初、Internet Explorer 6 で問題が発生し、上記のコードが正しく機能しませんでした。これに対処するために、選択オブジェクトにアクセスする前に focus() 呼び出しが追加されます。さらに、ShowSelection() 関数を onkeydown イベントにアタッチすると、選択されたテキストを検出するための安定したソリューションが提供されます。

document.onkeydown = function (e) {
  ShowSelection();
};

さらに説明すると、ボタンに関する問題は、Internet Explorer でテキストの選択を解除するというボタン固有の動作に起因しています。したがって、代わりに単純な入力ボタンを使用することをお勧めします。このソリューションを実装すると、テキスト ボックス コントロールから選択したテキストを効果的に取得でき、Internet Explorer 6 で発生する課題を克服できます。