这是一个数字密码, 要能够智能的跳转到文本的某个位置, 就需要通过 JS 来控制跳转!
1.onkeyup 监听
<input class="put" id="number-password-input" type="tel" maxlength="12" tabindex="6" onkeyup="dealKeyup(this);">
2. 智能判断
- // 光标定位
- function dealKeyup(that) {
- var input_val = $(that).val();
- var input_arr = input_val.split("-");
- for(var i=0;i<input_arr.length;i++) {
- if (input_arr[i] == ' ') {
- setCaretPosition(that, i*2);
- return;
- }
- }
- }
这个方法, 获取输入框的值, 处理成数组. 遍历数组, 找寻到第一个为空的位置, 定位到这个位置.
3. 处理光标定位
- // 获取光标位置
- function getCursortPosition(ctrl) {
- var CaretPos = 0; // IE Support
- if (document.selection) {
- ctrl.focus();
- var Sel = document.selection.createRange();
- Sel.moveStart ('character', -ctrl.value.length);
- CaretPos = Sel.text.length;
- }
- // Firefox support
- else if (ctrl.selectionStart || ctrl.selectionStart == '0')
- CaretPos = ctrl.selectionStart;
- return (CaretPos);
- }
- // 设置光标位置
- function setCaretPosition(ctrl, pos){
- if(ctrl.setSelectionRange)
- {
- ctrl.focus();
- ctrl.setSelectionRange(pos,pos);
- }
- else if (ctrl.createTextRange) {
- var range = ctrl.createTextRange();
- range.collapse(true);
- range.moveEnd('character', pos);
- range.moveStart('character', pos);
- range.select();
- }
- }
亲测可用!
方法论: 没想到 js 还可以这么玩定位, 有意思!
来源: https://www.cnblogs.com/jiqing9006/p/6510114.html