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

最新推荐文章于 2024-06-05 14:57:08 发布

luffy5459

最新推荐文章于 2024-06-05 14:57:08 发布

阅读量7.7k

点赞数 4

分类专栏： Web前端文章标签： setSelectionRange()不生效 input focus

本文链接：https://blog.csdn.net/feinifi/article/details/84941280

版权

Web前端专栏收录该内容

87 篇文章 3 订阅

订阅专栏

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

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

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

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

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

代码如下：

<!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()光标位置不正确，需要做一个延时操作，然后设置光标位置。

luffy5459

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
5
评论
input元素获取焦点focus设置光标位置setSelectionRange不生效的问题

自己在开发中遇到的一个问题，input文本元素获取焦点，光标按理说需要停留在输入框文字之后。但是有的情况，并不是这样，有时候光标会移到输入框开始位置。即使设置了光标位置setSelectionRange(-1,-1)，但是也不会生效。解决办法就是该方法setSelectionRange()在获取焦点方法之后做一个延时再执行:ele.focus();setTimeout(function...
复制链接

扫一扫