選択範囲を文字列で置き換える

フォーム上の入力欄（textarea）で、選択範囲を指定文字列と置き換える処理。

/**
 * @param Element field 対象textareaフィールド（getElementById等で取得）
 * @param string str 差し込む文字列
 */
function insertString (field, str) {
  if (field.selectionStart) {
    var position = field.selectionStart;
    field.value = field.value.substr(0, position)
      + str
      + field.value.substr(field.selectionEnd, field.value.length);
    field.selectionStart = position + str.length;
    field.selectionEnd = field.selectionStart;
  } else { // IE対応
    field.focus();
    field.document.selection.createRange().text = str;
    // field.value += str;
  }
}

最近JavaScriptのネタばっかりだな。
実はもうひとつネタがあるのだが、こちらは仕込みに若干時間を要するので、この週末にでも。

7/10 16:55 追記: 誤りを発見。一部修正。

当店はテイクアウト禁止です。（スマイル）

よくある「画像お持ち帰り禁止」対応。

その様な依頼には「やっても無駄ですよ」と答えることにしているが、「それはわかっているがやってくれ」と改めて依頼されるのが常。
ググってもなかなか「これ」というサンプルが見つからず、仕方なく手書きした。きっと再発明だろうが、それはそれ。

function denyTakeOut () {
  var doNothing = function () {return false;}
  var configureElement = function (element) {
    if (element.oncontextmenu == null) {
      element.oncontextmenu = doNothing;
      element.onselectstart = doNothing;
      element.onmousedown = doNothing;
    }
  }
  var elements = $$('.deny_take_out');
  for (var i = 0 ; i < elements.length ; i ++) {
    configureElement(elements[i]);
  }
}

prototype.jsを使用しているので、別途インクルードが必要。

<script type="text/javascript" src="/path/to/prototype.js"></script>

お持ち帰りを禁止したい画像のスタイルに、 "deny_take_out" クラスを追加。

<img src="/path/to/image1.png" width="100" height="100" alt="画像1" class="deny_take_out" />
<img src="/path/to/image2.png" width="100" height="100" alt="画像2" class="icon deny_take_out" />

htmlの最後（body閉じタグの直前とか）で、denyTakeOut関数を実行。
ホントはwindow.onloadあたりで実行した方がキレイ。

<script type="text/javascript">
denyTakeOut();
</script>

取り急ぎ、Safari 4/Mac, Firefox 3.5/Mac, IE7 だけチェック済。
ほかのブラウザでの確認は後ほど。