javascript焦点到文本框末尾

在JavaScript中,使用`obj.focus()`可以使输入框获得焦点,但在文本框已有内容时,光标会出现在首字符位置。为提升用户体验,期望光标位于文本末尾。在Chrome和Firefox中,调用`focus`后会自动回到上次位置,但可以通过设置`selectionStart`属性确保光标在文本最后。
摘要由CSDN通过智能技术生成

在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 = "执行" />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值