投稿サイトの拡張をしたいです。
リッチエディタを組み込みたいのですが、CDNが見つからなかったのでJavaScriptでつくることにしたのですが、
カーソル位置を指定してもボタンをクリックするときにカーソル位置が0になってしまいます。
指定した位置にタグを追加するにはどうすればいいでしょうか？

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>サンプル</title>
6<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7<script>
8  function getRangeIndex(s){
9    var v = document.getElementById("view");
10    v.innerText = "選択範囲のカーソル位置は、" + s + "です。";
11  };
12
13  $(function(){
14    var s = $('#txt1').get(0).selectionStart;
15    let inStr = String("<br>");
16    console.log(s);
17
18    $('#blueClick').click(() => {
19      let txtS = String($('#txt1').val().slice(0, s));
20      let txtE = String($('#txt1').val().slice(s));
21      console.log(s);
22      console.log(txtS);
23      console.log(txtE);
24
25      joinTxt = txtS + inStr + txtE;
26      $('#txt1').val(joinTxt);
27      console.log(joinTxt);
28    });
29  });
30</script>
31</head>
32<body>
33
34  <input type="text" id="txt1" onkeyup="getRangeIndex(this.selectionStart);">
35  <p id="view"></p>
36  <button id="blueClick">改行</button>
37
38</body>
39</html>

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

回答1件

ベストアンサー

テキストボックスは１行入力しかできないので改行したいならテキストエリアにするとよいでしょう

sample

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $('#blueClick').on('click',function(){
5    var v= $('#ta1').val();
6    var selin = $('#ta1').prop('selectionStart');
7    var selout = $('#ta1').prop('selectionEnd');
8    var v1=v.substr(0,selin);
9    var v2=v.substr(selin,selout-selin);
10    var v3=v.substr(selout);
11    $('#ta1')
12      .val(v1+v2+"\n"+v3)
13      .prop({
14        "selectionStart":selin,
15        "selectionEnd":selin+v2.length
16        })
17      .trigger("focus");
18  });
19});
20</script>
21<textarea id="ta1">
2211111111111
2322222222222
2433333333333</textarea><br>
25<input type="button" id="blueClick" value="改行">