在页面中js获取光标/鼠标的坐标及光标的像素坐标

近期为网站开发页面统计，以前虽然也开发过，但是功能不是很全，所以这次把一些好功能给用上。

例如这次的，页面JS光标/鼠标坐标，你也许问着有什么用，百度统计中有个热点统计图，这下清楚明白了吧。

好了，上肉：
功能：获取光标的像素坐标


代码如下:

<html>
<head>
<script type="text/javascript">
function showPosition(e){
var x,y;
var e = e||window.event;

document.getElementById("x").value = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
document.getElementById("y").value = e.clientY+document.body.scrollTop+document.documentElement.scrollTop

}
</script>
</head>
<body>
<div onmousemove="showPosition(event);" style="height:100%; width:100%;">
x:<input id="x" type="text" value="" />
y:<input id="y" type="text" value="" />
</div>
</body>
</html>

赞 (0)

相关推荐

  • JavaScript中在光标处插入添加文本标签节点的详细方法

    正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点.但是这两个对象在IE和标准的DOM方式的运用方法是不同的. 思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区).然后,从Selection对象转成Range对象.目的是利用Range对象的方法插内容进去.最后,插入动作结束后将光标移到插入内容的后面. var sel = win.document.selection; //IE var sel = win.getSelection(

  • javascript textarea光标定位方法(兼容IE和FF)

    今天在做一个博客转发的功能,就像新浪微薄转播的那个功能一样,有一个textArea,就是我们发微薄的那个框,别人的微薄都有一个转发的按钮,当我们点击这个转发按钮的时候,他的微薄就会进入到textArea中,看起来很简单的文本框赋值,其实难点就在于,这时候的光标是定位在最前面的. 于是搜索了baidu,google,找到了 IE下面的方法 复制代码 代码如下: var tea=document.getElementById("文本框的ID"); var txt=textArea.crea

  • Javascript实现获取及设置光标位置的方法

    本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE

  • js实现获取焦点后光标在字符串后

    主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看 复制代码 代码如下: var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); //其原理就是获得焦点后重新把自己复制粘帖一下

  • js获取光标位置和设置文本框光标位置示例代码

    复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

  • js/html光标定位的实现代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author&q

  • JavaScript自定义文本框光标

    文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色).但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格.所以,尝试模拟文本框的光标,设计有自己风格的光标.以下是笔者个人的想法. [************************基本思路***************************] 对于键盘操作来说,光标的基本操作不外乎最基本的三个键:左箭头(left arrow).右箭头(right arrow)和退格键(backspace). 左箭

  • js光标定位文本框回车表单提交问题的解决方法

    本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in

  • js切换光标示例代码

    复制代码 代码如下: <!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> <title>js切换光标<

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

随机推荐