I try to make phone number mask in input tag. This is the http://jsbin.com/hibuyus/edit?html,output to my code.
<!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>
The problem is: 1) I inputed numeral. 2) The numeral appeared in the field in the right place. 3) The cursor went to the last position of the input field. 4) Then I pressed the keys on the keyboard - arrow left and arrow right - but cursor doesn't move correctly.
what is the problem, why cursor doesn't work?
The problem where the cursor always moves to the last position happens because of the last statement where event.target.value is reset. When the browser executes this, it moves the cursor to the last position. Note also that this line is also executed when you press the left or right arrow keys. To prevent this:
1) Check if key pressed is ArrowLeft or ArrowRight. If it is stop the function.
2) Move the cursor back to the correct position after the input value is changed.
Here is a sample code with the adjustments.
<!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>