日期:2014-05-16  浏览次数:20400 次

分享一个定位焦点光标的代码,我很少雷锋的。。。
本帖最后由 u010572351 于 2013-05-31 17:39:28 编辑
是这样的,我写了一个文本框在鼠标划过自动获得焦点的js,比较完美,后来发现在一些浏览器里面,如果写有内容,你再划进去的时候,鼠标会出现在文本左边。折腾了一会,有了结果,在这里分享给大家,好像网上写这个玩意儿的很少。我做一回雷锋。

先看看之前有的问题是怎么回事吧。


input获得焦点后,光标出现在了左侧,下面是解决方案。下面是解决方案。注意有大量注释的地方


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<form>
<input type="text" value="请输入内容" name="cons">
<input type="text" value="请输入邮箱">
</form>
<script language="javascript" type="text/javascript">
var myform=document.forms[0].cons;
myform.onmouseover=test;
var val_sys=myform.value;
function test(){
if(myform.value=="请输入内容"){
myform.value="";
}
myform.focus();

//****************这里是方案********************

//首先创建一个本文流对象
var mytext=myform.createTextRange();

//然后按字节来划取一段长度
mytext.moveStart("character",myform.value.length);

//选取这段长度,得到光标所在位置
mytext.select();

//****************这里是方案********************

}
myform.onmouseout=test2;
function test2(){
if(myform.value==""){
myform.value=val_sys;
myform.blur();
}

}
</script>
</body>
</html>

------解决方案--------------------
学习了!我弱弱的问一下document.forms[0].cons后面的.cons是什么意思啊?
------解决方案--------------------
引用:
Quote: 引用:

学习了!我弱弱的问一下document.forms[0].cons后面的.cons是什么意思啊?


是document里面的的form对象获取对象的方法,cons是input的name值。



嗷嗷嗷,谢谢!
------解决方案--------------------
呵呵  谢谢分享
------解决方案--------------------
楼主你确定这样能兼容其他浏览器?

TextRange以及 moveStart这些方法都是只有IE里面才有的
------解决方案--------------------
嗯,这个我知道,其他浏览器默认会保存光标的位置。当时我在设计编辑器,这个问题困扰了我很久,最后的解决办法是先判断浏览器是否为IE,然后再为内容区域绑定onbeforedeactivate和onactivate这2个事件,通过onbeforedeactivate事件调用selection.createRange().getBookmark()来获取光标的位置,然后在onactivate事件中通过moveToBookmark来定位光标,最后顺利实现了

    SaveSlectionRange: function () {
        /// <summary>
        ///保存光标的位置,此操作只针对IE,其他浏览器无需另外保存
        /// </summary>
        if (this.browser.ie) {
            //IE中内容区域通过Focus()获取焦点后,无法自动定位到上一次光标的位置,所以这里通过onbeforedeactivate和onactivate这2个事件来达到这个目的
            var ieSelectionBookmark;var me = this;