javascript焦点到文本框末尾

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

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

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

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

但是可编辑的“<div>”标签而不是“<input>”标签。“<div>”标签没有“selectionStart”属性;另一种不用迂回的代码实现：

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