Appending text to textbox at the cursor location using APS.net C# – Asp.net

Well, you can do this. But it will work like this:

Say we have two text boxes. We can click on the text box – type in, cursor around.

then you want to save typing, so you now go to the combo box, and select a value, and it will insert the combo box into your text and last cursor postion.

What this will require is when you click on the text box OR YOU move around, we need to grab both the click event (save cursor postion), or editing (again, save cursor postion).

This markup works – messey and quick + dirty – but it does work and it works against two edit text boxes.

The two fields I have of course would (should) be hidden with style=display:none.

But, this code does work:

      <h4>Inset Hotel</h4>
        <asp:DropDownList ID="DropDownList1" runat="server" Width="231px" 
            DataSourceID="SqlDataSource1" DataTextField="HotelName" DataValueField="ID"
            ClientIDMode="Static">
        </asp:DropDownList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyCalendar.My.MySettings.TEST4 %>" SelectCommand="SELECT [ID], [HotelName] FROM [tblHotels] ORDER BY [HotelName]"></asp:SqlDataSource>
        <br />
        <br />
        <div style="float:left">
         <asp:TextBox ID="TextBox1" runat="server" Width="400px" TextMode="MultiLine"
             Height="240px"
             ClientIDMode="Static"
             ></asp:TextBox>
        </div>
        <div style="float:left;margin-left:25px">
            <asp:TextBox ID="TextBox2" runat="server" Width="400px" TextMode="MultiLine" 
                Height="240px"
                ClientIDMode="Static"
                ></asp:TextBox>
        </div>
        <br />
        <asp:TextBox ID="txtCursor" runat="server" ClientIDMode="Static"></asp:TextBox>
        <asp:TextBox ID="txtControl" runat="server" ClientIDMode="Static"></asp:TextBox>
        <asp:TextBox ID="TextBox5" runat="server" ClientIDMode="Static"></asp:TextBox>

    </div>

    <script>
        $(document).ready(function () {
            //makes 'DetectChange' the handler when TextBox1 changes...
            $('#TextBox1,#TextBox2').click(function () {
                DetectChange(this);
            });
            $('#TextBox1,#TextBox2').keyup(function () {
                DetectChange(this);
            });

            $('#DropDownList1').change(function () {
                c = $(this)
                var SelectedValue = c.val();
                if (SelectedValue > 0) {
                    //get selected text and set to label
                    var SelectedText = $("#DropDownList1 option:selected").text();
                    console.log(SelectedText)
                    $('#TextBox5').val(SelectedText);

                    tBox = $('#txtControl').val()
                    tCursor = $('#txtCursor').val()
                    tEditBox = $('#' + tBox)
                    newResult = tEditBox.val()

                    if (tCursor >= 0) {
                        newResult = newResult.substring(0, tCursor) + SelectedText + newResult.substring(tCursor)
                        tEditBox.val(newResult)
                    }
                }
            });
        });

        function DetectChange(MyT) {
            c = $(MyT)
            $("#txtCursor").val(c.prop("selectionStart"))
            $("#txtControl").val(c.attr("ID"))
        }

    </script>

And so it looks like this:

So, you can now click on, or type + edit either text box, and if you go up to the combo box, select a choice – the text is inserted at your current position. It works for either text box.