Javascript: textarea内のキャレット位置を取得キャレットの左にbuttonを設置したい。

#実現したいこと
textarea内のカーソル位置を取得し、カーソルの左側に下記のイメージのようなボタンを設置したい。

html
1<html>
2<head>
3<script type="text/javascript" src="layout.js"></script>
4<title>sample</title>
5</head>
6<body>
7<p>row：<input type="text" name="row"></p>
8<textarea cols="30" rows="10">
9aaa
10bbb ccc ddd
11
12eee
13fff
14
15
16</textarea>
17</body>
18</html>

js
1var events='keyup click';
2events.trim().split(/\s+/).map(function(j){
3  document.addEventListener(j,function(e){
4    var t=e.target;
5    if(t.nodeName==="TEXTAREA"){
6      var v= t.value;
7      var selin = t.selectionStart;
8      var v1=v.substr(0,selin);
9      var v2=v.substr(selin);
10      var row=((m=v1.match(/\n/g))?m.length+1:1);
11      document.querySelector('[name=row]').value=row;
12    }
13  });
14});
15

#試したこと
qiita等の記事を参考にカーソルの置かれている行数までは取得することはできた。

#分からないこと
現在のキャレット位置の先頭文字にボタンを設置する方法が分からない。

kou0179

2019/04/14 05:25

textareaの文中に要素を割り込ませたいという事でしょうか？

rails_ruby

2019/04/14 05:29

行の先頭文字にカーソルがあるときだけ、カーソルの左にボタンを表示させたいです。ボタンの機能としては写真を挿入したい時に使いたいなと考えています。

退会済みユーザー

2019/04/25 04:03

kou0179さんので問題は解決されたのでしょうか？それとも解決してないのでしょうか？

rails_ruby

2019/04/25 04:25

まだ、解決できずにいます。位置を取得するところまでは、質問に投稿したコードで出来るのですが、カーソルの左側にinput fileを設置したいのですが出来ずにいますり

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

回答1件

html
1<div class="super-textarea">
2  <div class="add-button-field">
3    <button class="add-button">+</button>
4  </div>
5  <textarea cols="30" rows="10">
6  aaa
7  bbb ccc ddd
8
9  eee
10  fff
11  </textarea>
12</div>

.add-button-fieldとtextareaを横並べにします。尚、ボーダー込みで全く同じ高さにしてください。
.add-button-field内のbuttonをposition:absoluteに指定し、行数が変わったらbuttonに対し、top:行emで高さを変えます。

CSS、JS共に結構面倒ですが、これならいけると思われます。

投稿2019/04/14 05:59

編集2019/04/14 06:01

kou0179

総合スコア304