Javascript 光标在输入标记中不起作用
我尝试在输入标签中制作电话号码掩码。 这是我的代码的最新版本Javascript 光标在输入标记中不起作用,javascript,jquery,html,forms,masking,Javascript,Jquery,Html,Forms,Masking,我尝试在输入标签中制作电话号码掩码。 这是我的代码的最新版本 <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <input id="phone" type="text" value="+7 (___) ___ __ __" size
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input id="phone" type="text" value="+7 (___) ___ __ __" size="18">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
var inputPhone = $("#phone"),
// cashedValue = "+7 (___) ___ __ __";
cashedValue = {
4: '_',
5: '_',
6: '_',
9: '_',
10: '_',
11: '_',
13: '_',
14: '_',
16: '_',
17: '_'
},
indexes = [4, 5, 6, 9, 10, 11, 13, 14, 15, 16];
inputPhone.on('keydown', function(event) {
console.log(event);
var $this = $(this);
if (event.key != "ArrowLeft" && event.key != "ArrowRight"){
event.preventDefault();
}
console.log("keyCode =", event.key, '(', event.keyCode, ')');
var defaultValue = this.defaultValue,
cursorPosition = event.target.selectionStart,
keyCode = event.keyCode;
console.log("cursorPosition =", cursorPosition);
if (48 <= keyCode && keyCode <= 57) {
if (cursorPosition < 4) {
cashedValue[4] = event.key;
} else if (4 <= cursorPosition && cursorPosition < 7) {
cashedValue[cursorPosition] = event.key;
} else if (cursorPosition == 7 || cursorPosition == 8) {
cashedValue[9] = event.key;
} else if (9 <= cursorPosition && cursorPosition < 12) {
cashedValue[cursorPosition] = event.key;
} else if (cursorPosition == 12) {
cashedValue[13] = event.key;
} else if (cursorPosition == 13 || cursorPosition == 14) {
cashedValue[cursorPosition] = event.key;
} else if (cursorPosition == 15) {
cashedValue[16] = event.key;
} else if (cursorPosition == 16 || cursorPosition == 17) {
cashedValue[cursorPosition] = event.key;
} else {
return false;
}
}
console.log("cashedValue =", cashedValue);
console.log("inputPhone =", inputPhone);
console.log("$this =", $this);
event.target.value = "+7 (" + cashedValue[4] + cashedValue[5] + cashedValue[6] + ") " + cashedValue[9] + cashedValue[10] + cashedValue[11] + " " + cashedValue[13] + cashedValue[14] + " " + cashedValue[16] + cashedValue[17];
// if ($this.setSelectionRange) {
// $this.setSelectionRange(0,0);
// } else if ($this.createTextRange) {
// range = $this.createTextRange();
// range.collapse(true);
// range.moveEnd('character', 0);
// range.moveStart('character', 0);
// range.select();
// }
});
});
</script>
</body>
</html>
无标题
$（文档）.ready（函数（$）{
变量inputPhone=$（“#电话”），
//cashedValue=“+7（____________;）；
现金价值={
4: '_',
5: '_',
6: '_',
9: '_',
10: '_',
11: '_',
13: '_',
14: '_',
16: '_',
17: '_'
},
指数=[4,5,6,9,10,11,13,14,15,16]；
inputPhone.on（'keydown'，函数（事件）{
console.log（事件）；
var$this=$（this）；
if（event.key！=“ArrowLeft”&&event.key！=“ArrowRight”）{
event.preventDefault（）；
}
log（“keyCode=，event.key'（'，event.keyCode'））；
var defaultValue=this.defaultValue，
cursorPosition=event.target.selectionStart，
keyCode=event.keyCode；
console.log（“cursorPosition=”，cursorPosition）；
如果（48光标总是移动到最后一个位置的问题是因为重置了最后一条语句，其中event.target.value
。当浏览器执行此操作时，它会将光标移动到最后一个位置。还要注意，当您按左或右箭头键时，这一行也会执行。要防止出现此情况：
1） 检查按下的键是否为arrow left
或arrow right
。如果是，则停止该功能。
2） 更改输入值后，将光标移回正确位置
下面是一个带有调整的示例代码
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input id="phone" type="text" value="+7 (___) ___ __ __" size="18">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
var inputPhone = $("#phone"),
// cashedValue = "+7 (___) ___ __ __";
cashedValue = {
4: '_',
5: '_',
6: '_',
9: '_',
10: '_',
11: '_',
13: '_',
14: '_',
16: '_',
17: '_'
},
indexes = [4, 5, 6, 9, 10, 11, 13, 14, 15, 16];
inputPhone.on('keydown', function(event) {
console.log(event);
var $this = $(this);
if (event.key != "ArrowLeft" && event.key != "ArrowRight"){
event.preventDefault();
}
// If left or right keys, stop function, normal stuff will happen
if (event.key == "ArrowLeft" || event.key == "ArrowRight"){
return;
}
console.log("keyCode =", event.key, '(', event.keyCode, ')');
var defaultValue = this.defaultValue,
cursorPosition = event.target.selectionStart,
keyCode = event.keyCode;
console.log("cursorPosition =", cursorPosition);
if (48 <= keyCode && keyCode <= 57) {
if (cursorPosition < 4) {
cashedValue[4] = event.key;
} else if (4 <= cursorPosition && cursorPosition < 7) {
cashedValue[cursorPosition] = event.key;
} else if (cursorPosition == 7 || cursorPosition == 8) {
cashedValue[9] = event.key;
} else if (9 <= cursorPosition && cursorPosition < 12) {
cashedValue[cursorPosition] = event.key;
} else if (cursorPosition == 12) {
cashedValue[13] = event.key;
} else if (cursorPosition == 13 || cursorPosition == 14) {
cashedValue[cursorPosition] = event.key;
} else if (cursorPosition == 15) {
cashedValue[16] = event.key;
} else if (cursorPosition == 16 || cursorPosition == 17) {
cashedValue[cursorPosition] = event.key;
} else {
return false;
}
}
console.log("cashedValue =", cashedValue);
console.log("inputPhone =", inputPhone);
console.log("$this =", $this);
event.target.value = "+7 (" + cashedValue[4] + cashedValue[5] + cashedValue[6] + ") " + cashedValue[9] + cashedValue[10] + cashedValue[11] + " " + cashedValue[13] + cashedValue[14] + " " + cashedValue[16] + cashedValue[17];
// Move cursor back since the browser moved it when new input value was changed
event.target.selectionStart = ++cursorPosition;
event.target.selectionEnd = cursorPosition;
});
});
</script>
无标题
$（文档）.ready（函数（$）{
变量inputPhone=$（“#电话”），
//cashedValue=“+7（____________;）；
现金价值={
4: '_',
5: '_',
6: '_',
9: '_',
10: '_',
11: '_',
13: '_',
14: '_',
16: '_',
17: '_'
},
指数=[4,5,6,9,10,11,13,14,15,16]；
inputPhone.on（'keydown'，函数（事件）{
console.log（事件）；
var$this=$（this）；
if（event.key！=“ArrowLeft”&&event.key！=“ArrowRight”）{
event.preventDefault（）；
}
//如果左键或右键，停止功能，正常的事情就会发生
如果（event.key==“ArrowLeft”| | event.key==“ArrowRight”）{
返回；
}
log（“keyCode=，event.key'（'，event.keyCode'））；
var defaultValue=this.defaultValue，
cursorPosition=event.target.selectionStart，
keyCode=event.keyCode；
console.log（“cursorPosition=”，cursorPosition）；
如果（48或使用掩码$（“#number_phone”）.mask（“（000）000 000”）；