Question 87888 in ASP.NET Question posted in
The official documentation can be found here.

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

I am trying to insert some text in to textbox in WebForm ASP.net. My goal is when the user select item from the dropdown the item will be added/inserted into the textbox text at the cursor position. I have tried different way but no luck. The issue I am facing is that I am not able to find the cursor position.

I have the textbox and dropdown list:

        <div class="row" style="text-align: right; align-content: baseline">
            <div class="col-sm-12 col-md-12 col-lg-12 margin_top_bottom_10px" style="display:flex">
                <asp:DropDownList ID="ddlElementToAdd" runat="server" Width="20%" />
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12 margin_top_bottom_10px">
                <asp:TextBox ID="TextBox1" runat="server" Width="100%" Height="500" 
                TextMode="MultiLine"></asp:TextBox>                    
            </div>
        </div>

I add the item to dropdown list onload the page.
enter image description here

Any suggestion
Thanks

Tags:

2

Answers


  1. 0

    When you select a drop down then the cusor focus is moved to drop down. As the focus is not at the text box there is no way you can get the cursor position of the text box as technically the focus is at dropdown

    If you want, you can add the text at the end of the texbox or at the specific position in textbox using drop down onchange event where you can call a function to add the text in the texbox using some string functions

    Login or Signup to reply.
  2. 0

    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:

    enter image description here

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search