Positioning cursor in specific locations in a textbox

Question

I am creating a website using C# and .net and I'm looking for specific functionality. I have a button and a textbox. On button onclick, the textbox gains focus and today's date is added to the top. The user can then add a note to the textbox and save it. Now a couple days after creating the first not, the user clicks the button again. The new today's date gets added to the top and the old date/note is moved down a line. What I'm trying to do is position the cursor after the current date but before the old date/note so the user doesn't have to click the position themselves.

I've been able to put the cursor at the end of the textbox but not at say position 12 or on line 2. Is this possible?

Maybe you can use this question / answer to help. http://stackoverflow.com/questions/13360665/insert-text-set-focus-on-in-a-aspx-input-field — jac, Jul 30 '14 at 22:31

score 0 · Answer 1 · answered Jul 30 '14 at 22:49

I'm having a tough time envisioning what you're trying to accomplish based on the description alone. If you have an ordered list of textbox inputs containing dates in descending order, do you simply want to give focus to the most recent date's respective textbox? If so, I'd probably use javascript on page load (this example uses jQuery, but you could do something similar with vanilla JS too):

<script type="text/javascript">
    $(document).ready(function(){
        $(".myDateInputClass")[0].focus();
    }
</script>

score 0 · Accepted Answer · answered Jul 30 '14 at 22:59

This will help you move the the cursor and focus on the nth character in your textbox. If you have the following textbox and button elements:

<div>
    <input type="text" id ="txtTest" name="txtText" class="col-md-4"/>
    <input type="button" id="btnTest" value="Focus on textbox"/>
</div>

The following will move the cursor to nth character in the textbox on button click.

<script>
    $("#btnTest").on("click", function () {
        var positionToPlaceCursor = 3;// as an example
        $.fn.setCursorPosition = function (pos) {
            this.each(function (index, elem) {
                if (elem.setSelectionRange) {
                    elem.setSelectionRange(pos, pos);
                } else if (elem.createTextRange) {
                    var range = elem.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', pos);
                    range.moveStart('character', pos);
                    range.select();
                }
            });
            return this;
        };

        $("#txtTest").setCursorPosition(positionToPlaceCursor);
    });

</script>

I found it here: http://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/

Hope it helps Happy coding!

Positioning cursor in specific locations in a textbox

2 Answers2