自己在开发中遇到的一个问题,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()光标位置不正确,需要做一个延时操作,然后设置光标位置。