#実現したいこと
javascriptで下記の入力内容を取得する方法知りたい。
最終的には、contenteditableを仮想textareaとして入力した内容をajaxを使ってポストしたい(現状ではやり方がわからない)

html
1<div contenteditable="true" id="text-area">
2</div>

入力するとこうなる。

html
1<div contenteditable="true">
2<p>初めまして</p>
3<p>テストです</p>
4</div>

困っていること
contenteditableを使用すると、改行時にpタグが入ってしまう。
そのため、入力したテキストのみを取得することができずにいます。

行動規範の内容に同意します

回答1件

ベストアンサー

contenteditableを使用すると、改行時にpタグが入ってしまう。

ブラウザによって実装はまちまちですよ
とはいえ、textContentを参照すればテキストは拾えます

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const observer = new MutationObserver((mutations) => {
4    mutations.forEach((mutation) => {
5      console.log(mutation.target.textContent);
6    });
7  });
8  const config = {childList: true};
9  observer.observe(document.querySelector('[contenteditable]'), config);
10  
11});
12</script>
13<div contenteditable="true">test</div>

ajaxでpost

ajaxはfetchにシフトして、データはformdataで持ちます
postのタイミングがなにかのトリガーによる場合は前回回答した
MutationObserverも不要です

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#btn').addEventListener('click',()=>{
4    const method="POST";
5    const body=new FormData;
6    const url="hoge.php";
7    body.append("val",document.querySelector('[contenteditable]').textContent);
8    fetch(url,{method,body}).then(res=>res.text()).then(console.log);
9  });
10});
11</script>
12<div contenteditable="true">test</div>
13<input type="button" id="btn" value="send">