textareaのクリックした位置にテキストを挿入したい

textareaのクリックした位置にテキストを挿入したいです。

問題点

textareaに、
あいうえお
かきくけこ
と入力。
そして、「け」と「こ」の間にカレット位置を合わせて、
ボタンを押して「ダミー」という文字列を挿入。

望む結果

あいうえお
かきくけダミーこ
になるようにしたい。

実際

あいうえお
かきくダミーけこ
になってしまいます。

aspx
1<%@ Page Language="VB" %>
2<%@ Import Namespace="System" %>
3<%@ Import Namespace="System.Xml" %>
4<%@ Import Namespace="System.Linq" %>
5<%@ Import Namespace="System.Xml.Linq" %>
6<%@ Import Namespace="System.IO" %>
7<%@ Import Namespace="System.Web.UI.HtmlControls" %>
8<%@ Import Namespace="System.Windows.Forms" %>
9<%@ Import Namespace="System.Data" %>
10
11<script runat="server">
12    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
13        If Page.IsPostBack Then
14
15            Dim index As Integer = Integer.Parse(Request.Form("FocusIndex"))
16
17            Dim length As String = Request.Form("FocusLength")
18            Dim targetId As String = Request.Form("FocusItem")
19            Dim target As TextBox = DirectCast(FindControl(targetId), TextBox)
20            Dim inserttext As String = "ダミー"
21
22            target.Text = target.Text.Substring(0, index) + inserttext + target.Text.Substring(index - length)
23
24
25
26        End If
27    End Sub
28</script>
29
30<html>
31<head>
32    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
33    <title></title>
34</head>
35<body>
36    <form runat="server">
37        <table>
38            <tr>
39                <td>Item 1 :  
40                    <asp:TextBox ID="ItemBox1" runat="server" TextMode="MultiLine"></asp:TextBox></td>
41                <td>Item 2 :  
42                    <asp:TextBox ID="ItemBox2" runat="server" TextMode="MultiLine"></asp:TextBox></td>
43            </tr>
44        </table>
45        <input type="hidden" runat="server" id="FocusItem" name="FocusItem" value="" />
46        <input type="hidden" runat="server" id="FocusIndex" name="FocusIndex" value="" />
47
48        <asp:Button ID="Button1" runat="server" Text="Button" />
49    </form>
50
51    <script>
52        $("textarea").on("focus click keyup", function (e) {
53            $("#FocusItem").val(e.target.id);
54            var index = e.target.selectionStart;
55            $("#FocusIndex").val(index);
56            $("#FocusLength").val(e.target.selectionEnd - index);
57            console.log(e.target.selectionEnd);
58        });
59    </script>
60</body>
61</html>

ご教授いただけると幸いです。

退会済みユーザー

2023/05/21 07:36

ASP.NET Web Forms アプリの話のようですが、そうであれば ASP.NET のタグをつけてください。

ranra

2023/05/21 12:02

asp.netタグを追加致しました。ありがとうございます。

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

回答1件

ベストアンサー

以下の記事が参考になりませんか？

textarea のキャレット位置に文字列を挿入
http://surferonwww.info/BlogEngine/post/2012/01/09/Inserting-string-at-caret-position-in-textarea.aspx

上のページからもリンクが張ってありますが以下のページで試すことができるので、質問者さんの目的に合っているかやってみてください。

実験室
http://surferonwww.info/Test/099-InsertStringAtCaretPositionInTextarea(2).htm

投稿2023/05/21 07:28

編集2023/05/29 23:29

退会済みユーザー

総合スコア0

ranra

2023/05/21 12:17

ご回答ありがとうございます。ご紹介いただいたものがまさに理想的な挙動です。ご紹介して頂いたものは２行目であっても、正しく挿入されていますが、ご紹介いただいたコードでasp.netに取り入れる中でうまくできていないのか、２行目の挿入位置が少しずれてしまいます。

退会済みユーザー

2023/05/21 13:14

> asp.netに取り入れる中でうまくできていないのか、どのように取り入れたのですか？　基本的には html と javascript の話で ASP.NET は全く関係なく実現できるはずなのですが。紹介した記事のコードも ASP.NET は全く関わってないのが分かりますか？

ranra

2023/05/21 13:57

SurferOnWww様 SurferOnWww様が紹介してくださったコードで見事できました。ありがとうございます。 TextBoxを使いたい場合であっても、開発者で確認したところtextareaの中身がないように見えて、取得もできないと思い込んでしまっていました。しかし、おっしゃる通り、SurferOnWww様がご紹介してくださったサイトのコードをコピペして、 TextBoxにして少しだけ改変したところ、htmlとjavascriptのみで実装することができました。ありがとうございます！

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