Insert Text & Set Focus on/in a aspx input field?

Question

I have a problem to execute a javascript function on a aspx site that should insert a String at the beginning of the TextBox (MultiLine) Content and sets the Cursor in the middle of the inserted string. It just don't get called at all on my side.

ASPX Code:

    <head runat="server">
    <title>Unbenannte Seite</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function setCaretPosition(elemId, caretPos) {
            var elem = document.getElementById(elemId);

            if(elem != null) {
                if(elem.createTextRange) {
                    var range = elem.createTextRange();
                    range.move('character', caretPos);
                    range.select();
                }
                else {
                    if(elem.selectionStart) {
                        elem.focus();
                        elem.setSelectionRange(caretPos, caretPos);
                    }
                    else
                        elem.focus();
                }
            }
        }

        $("#<%=Button1.ClientID %>").click(function(e){
            e.preventDefault();
            var d = new Date();
            var curr_date = d.getDate();
            var curr_month = d.getMonth() + 1;
            var curr_year = d.getFullYear();
            var curr_hour = d.getHours();
            var curr_minute = d.getMinutes();
            var name = "Name";
            var wert = curr_date + "." + curr_month + "." + curr_year + " / " + curr_hour + ":" + curr_minute + " / " + name + "\n" + "----------------------------------------" + "\n";
            var len = wert.length();
            wert = wert + "\n" + "----------------------------------------" + "\n" + "\n";
            var input = $("#<%=tbVZusatz.ClientID %>");
            input.val(wert + input.val());
            input.val(input.val());
            setCaretPosition("<%=tbVZusatz.ClientID %>",len);
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="tbVZusatz" runat="server" TextMode="MultiLine" Height="500px" Width="300px"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Stempel" />
    </div>
    </form>
</body>

How the inserted String should look like:

13.11.2012 / 13:08 / LightMonk
----------------------------------------
(Position of the Cursor here!)
----------------------------------------

Sources I used for this:

http://jsfiddle.net/VP9zT/1/

Set keyboard caret position in html textbox

Corrected Javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $("#<%=Button1.ClientID %>").click(function(e){
            e.preventDefault();
            var d = new Date();
            var curr_date = d.getDate();
            var curr_month = d.getMonth() + 1;
            var curr_year = d.getFullYear();
            var curr_hour = d.getHours();
            var curr_minute = d.getMinutes();
            var name = "Name";
            var wert = curr_date + "." + curr_month + "." + curr_year + " / " + curr_hour + ":" + curr_minute + " / " + name + "\n" + "----------------------------------------" + "\n";
            var len = wert.length;
            wert = wert + "\n" + "----------------------------------------" + "\n" + "\n";
            var input = $("#<%=tbVZusatz.ClientID %>");
            input.val(wert + input.val());
            input.val(input.val());
            setCaretPosition("<%=tbVZusatz.ClientID %>",len);
        });
    });

    function setCaretPosition(elemId, caretPos) {
        var elem = document.getElementById(elemId);

        if(elem != null) {
            if(elem.createTextRange) {
                var range = elem.createTextRange();
                range.move('character', caretPos);
                range.select();
            }
            else {
                if(elem.selectionStart) {
                    elem.focus();
                    elem.setSelectionRange(caretPos, caretPos);
                }
                else
                    elem.focus();
            }
        }
    }


</script>

I guess var input = $("#tbVZusatz"); should be var input = $("#<%=tbVZusatz.ClientID%>"); same problem for setCaretPosition("tbVZusatz",len); — jbl, Nov 13 '12 at 12:25
Tryed it out, still not working =/ I am updating my question with it thought.... — LightMonk, Nov 13 '12 at 12:30
oh, my bad, but still isn't working :( but thanks that you are trying to help me ;) apreciate it — LightMonk, Nov 13 '12 at 12:57
Anyway, you are setting your click handler before the button has been parsed. This won't work. You should move your js code at the bottom of your doc, or better, include your click handler declaration in a $(document).ready(...); — jbl, Nov 13 '12 at 13:02
Like this?
$(document).ready($("#<%=Button1.ClientID %>").click(function(e){ .... }));
If yes, is not working... Where should I move the js exactly? inside the form? or outside of the body? html? — LightMonk, Nov 13 '12 at 13:18

score 2 · Accepted Answer · answered Nov 13 '12 at 13:37

2

First, your code should look like this, with handler registration on document.ready() (I removed the asp.net markup) http://jsfiddle.net/rMmwq/

Please also note the

 var len = wert.length;

instead of

 var len = wert.length();

answered Nov 13 '12 at 13:37

jbl

15,179
3
34
101

Insert Text & Set Focus on/in a aspx input field?

1 Answers1

Linked