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

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>

Answers:

Answer

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();

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.