javascript焦点到文本框末尾

[xiaozhiqiang15]

曾经有这么一张帖子：
在一般的程序中.程序员做输入框内容正确性检测时一般喜欢通过判断内容的合法性来确定焦点框.

如:

if(obj.value==""){ 

   obj.focus(); 

   return false; 

}

在Jquery中可以直接调用$("#idEle").focus();来获取焦点。
这样当哪一项输入框为空是就将焦点移动那一项输入框..这项功能使用起来非常方便..但是存在一个小小的问题...

那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符的位置...就上面的判断而言..如果文本框中没有内容..obj.focus正好可以满足我们直接在文本框中输入内容而不用点击一下文本框以使文本有焦点...

但是,如果文本框中已经有内容了..但是这个内容不合法.obj.focus()同样的将光标移动到了这个文本框的第一个字符的位置..这时就会让注意用户体验的设计师郁闷了...我们需要的是文本框得到焦点,然后文字光标移动到文本框的最后,让用户可以不用点击文本框直接输入内容..输入的内容会在原来的内容的后面追加起来..

下面的代码可以完成这个小细节:

<script language="javascript"> 
function getSelectPos(obj){ 
var esrc = document.getElementById(obj); 
if(esrc==null){ 
   esrc=event.srcElement; 
} 
var rtextRange =esrc.createTextRange(); 
rtextRange.moveStart('character',esrc.value.length); 
rtextRange.collapse(true); 
rtextRange.select(); 
} 
</script>

但是在我兴致勃勃的去尝试以上代码的时候，悲催的发现谷歌浏览器不支持“createTextRange”方法！

于是继续寻找，然后得到上述代码的支持多浏览器升级版：

function getSelectPos(obj){
 var esrc = document.getElementById(obj);
 if(esrc==null){
 esrc=event.srcElement;
 }
 //ie
 if(typeof esrc.createTextRange!=="undefined"){
 var rtextRange =esrc.createTextRange();
 rtextRange.moveStart('character',esrc.value.length);
 rtextRange.collapse(true);
 rtextRange.select();
 }
 //other
 else if(typeof esrc.selectionStart!=="undefined")
 {
 esrc.selectionStart=esrc.value.length;
 esrc.focus();
 }
 //not suppert
 else{
 alert("not support");
 }
}

不过以上代码我调试后，发现无论是IE还是chrome都是输出"not support";

请问要在谷歌浏览器中实现输入光标（焦点）移动至末尾，代码怎么写？

[xiaozhiqiang15]

谢谢版主！ 通过你的代码我知道原因了：我使用的是可编辑的“<div>”标签而不是“<input>”标签。 “<div>”标签没有“selectionStart”属性（调试时其值为“undefine”）。 所以那份兼容版代码输出“not support”。 测试代码如下：

<script type="text/javascript">
    function test(obj) {
       if (typeof obj == 'string') obj = document.getElementById(obj);
        obj.focus();
        if (obj.createTextRange) {
            var rtextRange = obj.createTextRange();
            rtextRange.moveStart('character', obj.value.length);
            rtextRange.collapse(true);
            rtextRange.select();
        }
        else if (obj.selectionStart) obj.selectionStart = obj.value.length;
    }
</script>


<div id="txt1" contenteditable="true"></div>
<input type="button" onclick="test('txt1');" value="执行" /><br />


<div id="txt2" contenteditable="true"></div>
<input type="button" onclick="test('txt2');" value="执行" />

<br/>
<br/>

<input id="txt3" type="text"/>
<input type="button" onclick="test('txt3');" value="执行" /><br />


<input id="txt4" type="text"/>
<input type="button" onclick="test('txt4');" value="执行" />

现在的情况是我项目中的“<div>”不能改成“<input>”。 怎样才能让“<div>”有“<input>”的“selectionStart”属性？

[Go 旅城通票]

chrome/firefox 调用focus后会自动返回到输入框内容上一次鼠标的位置，如果不在最后需要移动到最后可以使用selectionStart属性

<script type="text/javascript">
    function test(obj) {
       if (typeof obj == 'string') obj = document.getElementById(obj);
        obj.focus();
        if (obj.createTextRange) {
            var rtextRange = obj.createTextRange();
            rtextRange.moveStart('character', obj.value.length);
            rtextRange.collapse(true);
            rtextRange.select();
        }
        else if (obj.selectionStart) obj.selectionStart = obj.value.length;
    }
</script><input type="text" id="txt1" /><input type="button" onclick="test('txt1');" value="执行" /><br />
<input type="text" id="txt2" /><input type="button" onclick="test('txt2');" value="执行" />

[菜牛]

这么麻烦，你没用过富文本编辑器吗？用iframe设置html编辑模式就是了。

[xiaozhiqiang15]

表沉了

[plzzz]

用 div???你可以只用一个input浮动于所有div上边就好..从视角上完全看不出来,

[xiaozhiqiang15]

又折腾了一会，终于找到解决的方法。 首先谢谢上楼，解决的灵感来源于回复。 然后为什么我不能用<input>或者<textarea>标签？因为我要在里面插入表情图片，而换成input 或textarea后就像这个CSDN的回复表情栏一样显示的是一行“<img src=""....>”这样的代码而不是表情。 我现在的解决方案是在添加了表情<img>后再添加一个<input>标签，然后将光标移动到这个新加的<input>标签中，光标移动完后就再将这个<input>删除而实现这种移动光标的效果。

[xiaozhiqiang15]

多谢LS的提醒，这几天也有了解如UEditor这样的编辑器。 可还是觉得一个小功能不值得装插件。 另外也找到另一种不用迂回的代码实现：

<script type="text/javascript">
    function test(obj) {
       if (typeof obj == 'string') obj = document.getElementById(obj);
        obj.focus();
        if (obj.createTextRange) {//ie
            var rtextRange = obj.createTextRange();
            rtextRange.moveStart('character', obj.value.length);
            rtextRange.collapse(true);
            rtextRange.select();
        }
        else if (obj.selectionStart){//chrome "<input>"、"<textarea>"
			obj.selectionStart = obj.value.length;
		}else if(window.getSelection){
			
			var sel = window.getSelection();			

			var tempRange = document.createRange();
			tempRange.setStart(obj.firstChild, obj.firstChild.length);

			sel.removeAllRanges();
			sel.addRange(tempRange);
			//obj.focus();
		}
    }
</script>


<div id="txt1" contenteditable="true"></div>
<input type="button" onclick="test('txt1');" value="执行" /><br />


<div id="txt2" contenteditable="true"></div>
<input type="button" onclick="test('txt2');" value="执行" />

<br/>
<br/>

<input id="txt3" type="text"/>
<input type="button" onclick="test('txt3');" value="执行" /><br />


<input id="txt4" type="text"/>
<input type="button" onclick="test('txt4');" value="执行" />

[gaoruihui]

非常感谢楼主 一直在找可编辑div 的光标控制 其实一个建议 tempRange.setStart(obj.firstChild, obj.firstChild.length); // TODO 这样在产生多行的会不管用的吧 我用的是最笨的方法 document.getElementById('txt1').childNodes[document.getElementById('txt1').childNodes.length-2] 用这个作为参照

[lziyanl]

唉，我遇到的问题是kindeditor里面的focus，光标总在插入的文本开头，不得其解。 插入的文本在 kindeditor 的body下面

[懒得想昵称]

楼主真好 解决了div的光标移动问题 现在ie9+和主流浏览器都可以用这个方法 if(window.getSelection){ var sel = window.getSelection(); var tempRange = document.createRange(); tempRange.setStart(obj.firstChild, obj.firstChild.length); sel.removeAllRanges(); sel.addRange(tempRange); //obj.focus(); } 楼主能不能写写代码注释