javascript焦点到文本框末尾

Question

javascript浏览器输入框光标移动至末尾

Answer 1

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="执行" />

Answer 2

谢谢版主！
通过你的代码我知道原因了：我使用的是可编辑的“<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”属性？

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

多谢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="执行" />

Answer 7

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

Answer 8

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

Answer 9

楼主真好  解决了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();
}
楼主能不能写写代码注释