html5 contenteditable属性に関して

Question

html5のcontenteditable属性を使用してブログ用のエディタを作成しています。

contenteditable属性を適応しているエレメント内でenterを押し、divタグを作成し
そのdivタグ内の文字が空っぽなのかそうではないのかを判定したいです。
ただ、そのエンターを押した後に生成されるdivタグが空っぽなのかの判別ができません。

記述しているコードは以下のとおりです。

<div class="c-contenteditable" contenteditable="true" id="js-editable"></div>

//これだと#js-editableの中身に入っている文字全てを取ってきてしまいます。
$('#js-editable').on('keyup', function(e) {
  var $this = $(this);
  var text = $this.text();
  if ($this.text() == '') {
    console.log('空っぽ');
  }else{
    console.log(text);
  }
});

//これだとkeyupイベントのトリガーが引かれません
$('#js-editable div').on('keyup', function(e) {
  var $this = $(this);
  var text = $this.text();
  if ($this.text() == '') {
    console.log('空っぽ');
  }else{
    console.log(text);
  }
});

//これもkeyupイベントのトリガーが引かれません
$('#js-editable').find('div').on('keyup', function(e) {
  var $this = $(this);
  var text = $this.text();
  if ($this.text() == '') {
    console.log('空っぽ');
  }else{
    console.log(text);
  }
});

こちらどのようにすればcontenteditable属性の中でエンターを押した際に生成されるdivタグ内の文字列を取得することが出来るのでしょうか？

ご教授お願い致します。

Answer 1

thisを使うやり方がぱっと思いつかないので的外れかもしれませんが、

$('#js-editable').on('keyup', function(e) {
  console.log($(':focus').text());
}

で取得できました。いかがでしょうか？

Comments

[MasakazuFukami]

回答有難うございます！
これでも一行目は正しく取れるのですが、
enterを押して2行目移行がやはり1行目と2行目を足した文字列が出力されます...

[MasakazuFukami]

js-editableに:focus自体がセットされてしまっている気がします・・・

[keonheon]

なるほど。最新のEnterの回に記載したtextを取得ということでしょうか？
ちょっと力技感ありますけど、こんなのどうですか？
```
$('#js-editable').on('keyup', function(e) {
var html = $(':focus').html();
var text = html.split("<br/>")
console.log(text[text.length-2] || text[0]);
}
```

[keonheon]

あ、すいません、↑のやつやるとしても
<br/>じゃなくて<br>じゃないと動かないですね。

[keonheon]

あー、でもこれだと最後の行しか取得出来ないですね。すいません。。。

[MasakazuFukami]

解答ありがとうございます！！
そのようです。。。

Answer 2

こんな感じでとれないですかね

$('#js-editable').on('keyup', function(e) {
  var text = $(this).children('div').text();
  ～～ 略 ～～
});

---

追記

<div>が使われるChromeや<p>が使われるIEでは期待通りの動作をすると思いますが、 <br>が使われるFirefoxだとうまく動作しないと思います。 ```lang-javascript $('#js-editable').on('keyup', function(e) { var text = $(window.getSelection().anchorNode).text(); if (text.length == 0) { console.log('空っぽ'); }else{ console.log(text); } }); ```

Comments

[MasakazuFukami]

回答有難うございます！
これですと、chiderenの全てのdivタブのテキストを取ってきてしまうようです。。。
エンターを押して今カーソルがあっているところのテキストの取得方法についてご存知でしたらお願いしたいです！

[PruneMazui]

念の為確認なのですが、HTML側は以下のように書いてるということですか？

<div class="c-contenteditable" contenteditable="true" id="js-editable">
<div>編集可</div>
</div>

ブラウザによっては改行が<br>タグが使われる可能性もありますが大丈夫ですか？

[MasakazuFukami]

今は、
<div class="c-contenteditable" contenteditable="true" id="js-editable"></div>
こういう風に書いていて、cssでmin-height:24px;を指定しています。

改行のブラウザ互換に関しては、調べていたのですが一旦chromeで実装してから調整しようと考えていました。

[PruneMazui]

追記しました

[MasakazuFukami]

追記確認させて頂きました！
chromeで思い描いているように動きました！
ありがとうございます！！

なるほど。。。firefox系だとbrなのですね。。。
ちょっと頑張ってみます。。。