Introduction :
In this tutorial i will explain you how to check the mouse position in the textbox while text in entering. Here i explain with the help of JQuery. Here i use textbox to enter the text, and JQuery 1.7. I will be showing the position by alert.Here mouse position count starts as Whole numbers i.e,( 0,1,2,3,4,.............)
JQuery coding :
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script> new function ($) {
$.fn.getCursorPosition = function () {
var
pos = 0;
var
el = $(this).get(0);
// IE
Support
if
(document.selection) {
el.focus();
var
Sel = document.selection.createRange();
var
SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length -
SelLength;
}
//
Firefox support
else
if (el.selectionStart || el.selectionStart == '0')
pos = el.selectionStart;
return
pos;
}
} (jQuery);
$(document).ready(function () {
$("#txt").keypress(function () {
alert($("#txt").getCursorPosition());
});
});
</script>
Aspx coding :
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
</div>
</form>
</body>
Overall Coding after integrating JQuery and Aspx.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mousepositionkeypress.aspx.cs" Inherits="MastereventstoClient.mousepositionkeypress"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script> new function ($) {
$.fn.getCursorPosition
= function () {
var pos = 0;
var el = $(this).get(0);
// IE Support
if (document.selection) {
el.focus();
var Sel = document.selection.createRange();
var SelLength =
document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos =
Sel.text.length - SelLength;
}
// Firefox support
else if
(el.selectionStart || el.selectionStart == '0')
pos =
el.selectionStart;
return pos;
}
} (jQuery);
$(document).ready(function () {
$("#txt").keypress(function
() {
alert($("#txt").getCursorPosition());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
