emwaiblog

キーボードによる改行を<br>タグに変換する

テキストエリア内での、キーボードによる改行をその場で<br>タグに変えてしまうサンプル。あんまり需要ないと思いますが、テキストエリアとは別のチェックボックスで切り替えられるようにしたりすると応用できるかなと思います。

// テキストエリア
var field = document.getElementById('textarea');

// チェックボックス
var checkbox = document.getElementById('checkbox');

field.addEventListener('keypress', function(e) {
  if (e.keyCode == 13 && checkbox.checked) {
    // テキスト選択の開始インデックス（キャレット位置）
    var index = field.selectionStart;

    // 開始インデックスの所に '<br>' を追加
    field.value = field.value.substr(0, index) + '<br>' + field.value.substr(index, field.value.length);

    // 新しいキャレット位置
    field.focus();
    var newCaret = index + '<br>'.length;
    field.setSelectionRange(newCaret, newCaret);
    return false;
  }
});

チェックボックスがチェックされている場合に限りEnterキーによる改行で<br>を追加します。続けて入力がしやすいように新しいキャレット位置を<br>の後ろに設定します。

選択テキストをタグで囲む、またはキャレット位置に空のまま挿入する

テキストエリア内の選択テキストをHTMLタグで囲むサンプル。サンプルは<b>タグに固定してますが引数でタグを受け取れるよう関数にすればWYSIWYGっぽいフォームにできると思います。選択テキストがない場合はキャレット位置に内容が空のままでタグを挿入します。

// テキストエリア
var field = document.getElementById('textarea');

// 挿入する開始タグと終了タグ
var tag = new Array('<b>', '</b>');

document.getElementById('button').addEventListener('click', function() {

  // 選択テキストの開始インデックス（キャレット位置）
  var start = field.selectionStart;

  // 選択テキストの終了位置
  var end = field.selectionEnd;

  // 選択テキストの長さ
  var selected = end - start;

  // 選択テキスト
  var target = selected ? field.value.substr(start, selected) : '';

  // 選択中のテキストを '<b>' で囲む
  field.value = field.value.substr(0, start) + tag[0] + target + tag[1] + field.value.substr(end, field.value.length);

  // '<b>〜</b>'の部分を選択状態にする
  field.focus();
  field.setSelectionRange(start, (start + tag[0].length + selected + tag[1].length) );
});

サンプル