首页 > 代码库 > 设置输入框的光标置于文字末尾

设置输入框的光标置于文字末尾

2024-07-14 21:56:54   219人阅读

    我们在项目开发过程中，会遇到这么一个问题：页面有个搜索框，点击搜索按钮或者回车键搜索后，文本框的光标置于文字前方，不便于继续输入，

影响操作，我们需要将光标置于文本之后，这时我就需要下面这段代码来控制光标。

 

为了方便使用已封闭成函数

 1 function setCursorPos( input ) 2 { 3    var isIE = ( navigator.appName == "Microsoft Internet Explorer" );//判读是否为ie浏览器        4    var count = input.value.length; 5    if(isIE){//IE 6        var f = input.createTextRange();　//创建文本范围对象 7        f.moveStart(‘character‘,count); 　//更改范围起始位置, 如果count改为0就把光标放在text中的字符的最前面 8        f.collapse(true); 　//将插入点移动到当前范围的开始或结尾。 9        f.select(); 　//将当前选中区置为当前对象，执行10    }else{//FireFox11        input.setSelectionRange(count,count);12    }13    14    input.focus();15 }

 

演示示例：

 1 <body> 2  3 <textarea id="keyword"></textarea> 4 <input type="button" id="btn" value=http://www.mamicode.com/"确定" /> 5  6 <script type="text/javascript"> 7  8 var btn = document.getElementById("btn"); 9 btn.onclick = function()10 {11      var input = document.getElementById("keyword");12      setCursorPos( input );    13 }14 15 16 function setCursorPos( input )17 {18    var isIE = ( navigator.appName == "Microsoft Internet Explorer" );//判读是否为ie浏览器       19    var count = input.value.length;20    if(isIE){//IE21        var f = input.createTextRange();　//创建文本范围对象22        f.moveStart(‘character‘,count); 　//更改范围起始位置, 如果count改为0就把光标放在text中的字符的最前面23        f.collapse(true); 　//将插入点移动到当前范围的开始或结尾。24        f.select(); 　//将当前选中区置为当前对象，执行25    }else{//FireFox26        input.setSelectionRange(count,count);27    }28    29    input.focus();30 }31 32 33 </script>34 </body>
View Code

 


联系
我们