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