contenteditable 属性

HTML5 の Content Editable 属性を使用したノートを作成してみました。

See the Pen note (contenteditable) by senmyou (@senmyou) on CodePen.

現在 Android 用の軽量ノート、というかメモの切れ端の代わりになるようなアプリを作っているところです。
最初 textarea 要素で作り始めたのですが罫線がうまく引けませんでした。テキストエリアの背景の高さ（background-size）と行の高さ（line-height）を合わせ linear-gradient で背景に罫線を引くといい感じになるのですが、縦スクロールが発生したとき罫線は固定されたままでスクロールについてきません。試行錯誤を繰り返しているうち、背景（background-size）の高さがテキストエリアより小さいのでスクロールが発生しないのではと思い至りこの方法をあきらめました。
ほかに方法がないか探していたところ contenteditable 属性というものを発見。聞いたこともなかったのですが使ってみました。そのさいに気づいたことをまとめてみます。

contenteditable 属性の挙動について

HTML 要素の contenteditable 属性に true を設定すると、それだけで編集可能状態になります。入力した文字はその要素のコンテンツとなり、要素の幅に達すると overflow プロパティに従い自動的にスクロールバーを表示したり折り返したりします。改行すると新しい子要素が作成され、行の先頭でバックスペースを入力するとその行にあたる子要素が削除されカーソルが上の行へ移動します。
実際の html とその表示は以下のようになります。CSS で装飾していますが html は一行のみです。

  <div id="notearea" contenteditable="true"></div>

See the Pen RgPEry by senmyou (@senmyou) on CodePen.

white-space プロパティの設定

HTML5.jp で以下の解説を見つけました。

行の折り返しに連続した半角スペースがあたる場合について警告しています。また、デフォルト（normal）のままだと半角スペースを何個入力しても一個分のスペースになってしまいますが、これはエディタとしてはありがたくないですね。そこで white-space を設定しました。

white-space: pre-wrap;

ちなみに pre-wrap と pre の挙動の違いはわかりませんでした。

罫線を引く

ノートを作るにあたり、最初から罫線を引きたいと思っていました。そこで、あらかじめ子要素として div 要素を１０個配置し、CSS で各要素に線を引きました。textarea 要素に線を引くと前述のとおり縦スクロールについてこないのですが、div 要素に線を引くことで div 要素のコンテンツと罫線が一緒にスクロールするようになります。

#notearea > div {
  margin: 0;
  padding: 0 4px;
  min-height: 2rem;
  background-image:
    linear-gradient(to bottom, transparent, transparent calc(2rem - 1px), rgba(0,150,136,0.4) calc(2rem - 1px));
  background-size: auto 2rem;
}

pre-wrap の影響

Monaca デバッガを使用し android 上で確認しながら作っていたのですが、試しに APK を構築して動かしてみることにしました。すると以下のように、一見すると line-height が３倍になったかのような表示になってしまいました。

See the Pen NgqerV by senmyou (@senmyou) on CodePen.

この現象は PC 上のシミュレータ（プレビュー機能）でも発生していました。よくみると空白文字がいくつか挿入されています。また、罫線が引かれておらずインスペクタで DOM をみても一つの div 要素になっています。つまり通常の改行文字の入力や折り返しによるものではなさそうです。このときの html のコードは以下のようになっていました。

<div id="notearea" contenteditable="true">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

ここで white-space プロパティの pre-wrap をデフォルト（normal）にすると空白文字が詰められるせいか問題がなくなります。ではなぜ上記コードで空白文字が挿入されるのか。これは私見ですが、contenteditable を指定した要素のなかでは html の記述がそのままコンテンツの対象になっていると思われます。つまり、上記 html では「div 開始タグの前にあるタブ文字」と「div 終了タグの後ろにある改行」が空白文字に変換され、それぞれ div 要素の外に挿入される感じです。
html の記述から以下のようにタブ文字と改行を削除してみるとうまくいきました。

<div id="notearea" contenteditable="true"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

ふと「inline 要素を横に並べると要素間に不要な隙間が生じるけれど html の記述から改行を削除して詰めると隙間がなくなる」という現象を思い出しました。また、なぜ Monaca デバッガでは大丈夫だったのかは謎です。

backspace 入力

行の先頭でバックスペースを入力すると、その行にあたる div 要素が削除され、カーソルが上の行へ移動します。このとき、上の行でコンテンツが空（””）の div 要素はまとめて削除され、文字のある行までカーソルが一気に移動しました。この現象は各 div 要素のコンテンツに <br> を入力しておくことで防ぐことができました。これは子要素を持たない contenteditable 属性の要素で改行を行うと div 要素のコンテンツに <br> が入力されるというデフォルト動作になります。<br> なんて必要なさそうに思えますが、実は必要だったわけです。
以下の html が最終形態となります。うーん、見づらいですねｗ

<div id="notearea" contenteditable="true"><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div></div>

Android のキーボード出現時のスクロール

実機上で contenteditable 属性を指定した要素をタップすると編集可能状態になりキーボードが表示されます。このとき、要素のスクロールが行われないためカーソルがキーボードに隠れてしまうことがあります。これは contenteditable の影響か onsen ui の影響か、はたまた android の影響か私の作り方が原因か定かではありませんが、以下の対応でカーソルを見える位置にスクロールできました。
なお、以下のコードでは cordova のプラグイン ionic-plugin-keyboard を使用してキーボード表示イベントの監視を行っています。ちなみにこのリスナ内での window.innerHeight は画面の高さからキーボードの高さを引いた値になります。

var clickedDiv = {
  elem: null,
  y: 0
};
document.getElementById("notearea").addEventListener('click', function(e) {
  clickedDiv.elem = e.target;
  clickedDiv.y = e.y;
});
window.addEventListener('native.keyboardshow', function(e) {
  if (clickedDiv.y + clickedDiv.elem.clientHeight > window.innerHeight) {
    clickedDiv.elem.scrollIntoView(false);
  }
});

読み出しと書き込み

最後に上記 html（div の子要素１０個配置）で使用している読み書き関数を記載して本記事を終了します。

function read() {
  var divs = document.getElementById("notearea").getElementsByTagName("div");
  var num = divs.length;
  var i, note = [];

  for (i=0; i<num; i++ ) {
    note.push(divs[i].textContent);
  }
  return note;
}
function write(note) {
  var num = note.length;
  var i, text = "";

  for (i=0; i<num; i++) {
    text = note[i] ? note[i] : "<br>";
    text += ("<div>" + text + "</div>");
  }
  document.getElementById("notearea").innerHTML = text;
}