下の画像は、テキストエディタの画像ですが、 1～3行目の四角は全角空白を、4～6行目の矢印はタブを表しています。 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-09/ac48db1c-0d43-412f-9563-124fdd97a46a.png) HTMLのTextAreaで同じ表示にしたいのですが、どのようにすれば実現可能でしょうか。

テキストエリアにはそういう機能がないので難しいでしょう仮想的な表示用領域をつくって無理表現することはできそうですが # てきとうなサンプル ```javascript window.addEventListener('DOMContentLoaded', ()=>{ ta.addEventListener('input',()=>{ v=ta.value.replace(/ /g,"□").replace(/\n/g,"↓ ").replace(/\t/g,"> ")+"[EOF]"; d.innerHTML=v; }); const e = new CustomEvent("HTMLEvents"); e.initEvent('input', true, true ); ta.dispatchEvent(e); }); あいうえおか ```

下の画像は、テキストエディタの画像ですが、
1～3行目の四角は全角空白を、4～6行目の矢印はタブを表しています。

HTMLのTextAreaで同じ表示にしたいのですが、どのようにすれば実現可能でしょうか。

この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。

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

回答3件

全角空白に関しては、そういうWebフォントを用意すれば簡単に実現可能です。

タブはフォントではないので同じ手は使えません。何とかしてタブが表示されている位置を計算して、その場所にアイコンなどをうまく重ねてやる、などする必要があります。簡単ではないしょう。

投稿2022/05/09 07:36

int32_t

総合スコア22023

ベストアンサー

テキストエリアにはそういう機能がないので難しいでしょう
仮想的な表示用領域をつくって無理表現することはできそうですが

てきとうなサンプル

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  ta.addEventListener('input',()=>{
4    v=ta.value.replace(/　/g,"□").replace(/\n/g,"↓<br>").replace(/\t/g,"&gt; 　")+"[EOF]";
5    d.innerHTML=v;
6  });
7  const e = new CustomEvent("HTMLEvents");
8  e.initEvent('input', true, true );
9  ta.dispatchEvent(e);
10});
11</script>
12<div style="display:flex;justify-content:left;">
13<textarea id="ta" rows="20" cols="40" style="font-famly:monospace">
14　　　あ
15　　　　　　い
16　　　　　　　　　う
17	え
18		お
19			か</textarea>
20<div id="d"></div>
21</div>