input元素获取焦点focus设置光标位置setSelectionRange不生效的问题

约定不等于承诺〃 2022-04-08 10:42 338阅读 0赞

自己在开发中遇到的一个问题，input文本元素获取焦点，光标按理说需要停留在输入框文字之后。但是有的情况，并不是这样，有时候光标会移到输入框开始位置。即使设置了光标位置setSelectionRange(-1,-1)，但是也不会生效。

解决办法就是该方法setSelectionRange()在获取焦点方法之后做一个延时再执行:

ele.focus();
    setTimeout(function(){
        ele.setSelectionRange(-1,-1);
    },10);

这样，基本就能解决大部分不生效的问题。不知道在移动端会不会有什么差异。

另外，本人做了一个类似excel表格的光标移动操作，光标会随着上下左右方向键移动，并获取焦点，光标定位到文本末尾。

![20181210160121636.gif][]

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>input focus</title>
    	<style type="text/css">
    		input{width:100px;border:1px solid rgb(127, 186, 232);border-radius: 3px;
                    height: 25px;line-height: 25px;outline: none;}
    		input:focus{border-color:rgb(82,168,236);}
    		tr td:nth-child(6) input{width:146px;}
    	</style>
    	<script type="text/javascript" src="../jquery.min.js"></script>
    </head>
    <body>
    	<table cellspacing="0" border="1" style="border-collapse:collapse;">
    		<thead>
               <tr>
               	   <th>ID</th>
               	   <th>Name</th>
               	   <th>Gender</th>
               	   <th>Age</th>
               	   <th>Mobile</th>
               	   <th width="150px">Email</th>
               	   <th>Birthday</th>
               </tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>101</td>
    				<td><input type="text" value="zhangsan"/></td>
    				<td><input type="text" value="male"/></td>
    				<td><input type="text" value="24"/></td>
    				<td><input type="text" value="15011186333"/></td>
    				<td><input type="text" value="zhangsan@126.com"/></td>
    				<td><input type="text" value="1990-01-15"/></td>
    			</tr>
    			<tr>
    				<td>102</td>
    				<td><input type="text" value="zhangsan"/></td>
    				<td><input type="text" value="male"/></td>
    				<td><input type="text" value="18"/></td>
    				<td><input type="text" value="15011186333"/></td>
    				<td><input type="text" value="zhangsan@126.com"/></td>
    				<td><input type="text" value="1990-01-15"/></td>
    			</tr>
    			<tr>
    				<td>103</td>
    				<td><input type="text" value="zhangsan"/></td>
    				<td><input type="text" value="male"/></td>
    				<td><input type="text" value="20"/></td>
    				<td><input type="text" value="15011186333"/></td>
    				<td><input type="text" value="zhangsan@126.com"/></td>
    				<td><input type="text" value="1990-01-15"/></td>
    			</tr>
    			<tr>
    				<td>104</td>
    				<td><input type="text" value="zhangsan"/></td>
    				<td><input type="text" value="male"/></td>
    				<td><input type="text" value="19"/></td>
    				<td><input type="text" value="15011186333"/></td>
    				<td><input type="text" value="zhangsan@126.com"/></td>
    				<td><input type="text" value="1990-01-15"/></td>
    			</tr>
    			<tr>
    				<td>105</td>
    				<td><input type="text" value="zhangsan"/></td>
    				<td><input type="text" value="male"/></td>
    				<td><input type="text" value="28"/></td>
    				<td><input type="text" value="15011186333"/></td>
    				<td><input type="text" value="zhangsan@126.com"/></td>
    				<td><input type="text" value="1990-01-15"/></td>
    			</tr>
    		</tbody>
    	</table>
    </body>
    <script type="text/javascript">
    	$(function(){
    		$("table").keydown(function(event){
    			var e = event||window.event;
    			var keyCode = e.keyCode;
    			var ele = e.target;
    			var td = ele.parentNode;
    			var tr = td.parentNode;
    			var index = [].indexOf.call(tr.children,td);
    			var tr_parent = tr.parentNode;
    			var index2 = [].indexOf.call(tr_parent.children,tr);
    			if(keyCode=="37"){
    				e.preventDefault();
    				console.log("<-");
    				var prev = index-1;
    				if(prev==0){
    					prev = 1;
    				}
    				var target  = tr.children[prev].children[0];
    				target.focus();
    				if(target.setSelectionRange){
    					target.setSelectionRange(-1,-1);
    				}
    				if(target.createTextRange){
    					var range = target.createTextRange();
    					range.collapse(false);
    					range.select();
    				}
    				return false;
    			}else if(keyCode=="38"){
    				e.preventDefault();
    				console.log("up");
    				var prev = index2-1;
    				if(prev<0){
    					prev = 0;
    				}
    				var target = tr_parent.children[prev].children[index].children[0];
    				target.focus();	
    				if(target.setSelectionRange){
    					target.setSelectionRange(-1,-1);
    				}
    				if(target.createTextRange){
    					var range = target.createTextRange();
    					range.collapse(false);
    					range.select();
    				}
    				return false;
    			}else if(keyCode=="39"){
    				e.preventDefault();
                    console.log("->")
                    var next = index+1;
                    if(next==tr.children.length){
                    	next = tr.children.length-1;
                    }
                    var target = tr.children[next].children[0];
                    target.focus();
                    if(target.setSelectionRange){
    					target.setSelectionRange(-1,-1);
    				}
                    if(target.createTextRange){
    					var range = target.createTextRange();
    					range.collapse(false);
    					range.select();
    				}
                    return false;
    			}else if(keyCode=="40"){
    				e.preventDefault();
    				console.log("down");
    				var next = index2+1;
    				if(next==tr_parent.children.length){
    					next = tr_parent.children.length-1;
    				}
    				var target = tr_parent.children[next].children[index].children[0]
    				target.focus();
    				if(target.setSelectionRange){
    					target.setSelectionRange(-1,-1);
    				}
    				if(target.createTextRange){
    					var range = target.createTextRange();
    					range.collapse(false);
    					range.select();
    				}
    				return false;
    			}
    		});
    	});
    </script>
    </html>

再次说明一遍，如果获取焦点focus之后，setSelectionRange()光标位置不正确，需要做一个延时操作，然后设置光标位置。

[20181210160121636.gif]: /images/20220406/67c7985bf6434f4488f8dcb0fe0cdf2d.png