输入框内容格式化后从中间删除光标移至最后一位的问题

淩亂°似流年 2022-03-22 18:58 106阅读 0赞

转自博文：[格式化输入框内容后定位光标位置][Link 1]  
具体计算规则  
监听 keydown 事件，获取当前光标的位置。  
根据输入框的内容和光标位置，计算出当前光标位置的前一个字符的下标（不计算空格）。  
判断用户按了哪个键，是退格还是\[0-9a-f\]。如果是退格，光标应该定位在前一个字符，否则定位到后一个字符，从而计算出期望光标定位在哪个字符后面（不计算空格）。  
格式化数据，根据字符位置计算出光标位置（计算空格）。  
这里需要注意几点：  
当进行选中删除操作时，光标应该不需要前移。  
其他输入框不支持的字符需要处理，例如：ctrl等功能键。  
html:

<div class="container">
      <input type="text" id="input">
    </div>
    sass:
    .container {
      text-align: center;
      padding-top: 46px;
    }
    
    #input {
      font-variant: tabular-nums;
      box-sizing: border-box;
      margin: 0;
      display: inline-block;
      padding: 4px 11px;
      width: 300px;
      height: 32px;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.65);
      background-color: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      transition: all .3s;
      
      &:focus {
        border-color: #40a9ff;
        outline: 0;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        border-right-width: 1px !important;
      }
    }

babel:

const input = document.querySelector('#input');
      let expectCharIndex; // 期望光标所处位置前一个字符的下标（不包括空格）
    
      input.onkeydown = function(e) {
        const curValue = input.value; // 当前值
        console.log('keydown 阶段，此时 value 为：', curValue || '空');
        const selectionStart = input.selectionStart; // 当前选中的区域起始位置
        const selectionEnd = input.selectionEnd; // 当前选中区域结束位置
        console.log('当前光标位置：', selectionStart);
    
        const code = e.keyCode || e.which || e.charCode;
        const preCharIndex = getPreviousCharIndex(curValue, selectionStart);
        console.log('当前光标前一个字符的下标：', preCharIndex);
    
        // 计算编辑之后光标前一个字符
        if (code === 8) {
          if (selectionStart !== selectionEnd) { // 选中区间删除，此时光标应该不前移动
            expectCharIndex = preCharIndex;
          } else {
            expectCharIndex = preCharIndex - 1;
          }
        } else {
          expectCharIndex = preCharIndex + 1;
        }
    
        console.log('格式化后，期望光标前一个字符的下标：', expectCharIndex);
      };
    
      input.onkeyup = function() {
        const value = formatValue(input.value);
        console.log('keyup 阶段，此时 value 为：', value);
        input.value = value;
    
        const cursorIndex = getCursorIndex(value, expectCharIndex);
        console.log('期望光标的位置：', cursorIndex);
        console.log('=============================');
    
        // TODO 增加判断，如果是功能键等则不设置
        setTimeout(() => {
          input.setSelectionRange(cursorIndex, cursorIndex);
        }, 10);
      };
    
      /**
       * 格式化输入框内容，每两个字节中间插入一个空格。
       *
       * @param {string} value - 输入框内容
       * @return {string}
       */
      function formatValue(value) {
        if (!value) {
          return value;
        }
        value = value.replace(/\s*/g, '');
        if (value.length <= 2) {
          return value;
        }
        const arr = [];
        for (let i = 0; i < value.length - 1; i += 2) {
          arr.push(value.charAt(i) + value.charAt(i + 1));
        }
        if (value.length & 1) {
          // 如果是奇数，还需要添加末尾的数
          arr.push(value.charAt(value.length - 1));
        }
        return arr.join(' ');
      }
    
      /**
       * 根据输入的内容和光标位置计算前一个字符的下标(不计算空格)
       *
       * @param {string} value - 格式化后的输入框内容
       * @param {number} cursorIndex - 当前光标的位置
       * @return {number} 光标前一个字符的下标，如果前面没有字符，则返回 -1。
       */
      function getPreviousCharIndex(value, cursorIndex) {
        let subStr = value.substring(0, cursorIndex);
        subStr = subStr.replace(/\s*/g, '');
        return subStr.length - 1;
      }
    
      /**
       * 根据格式化之后的值和期望光标位置的前一个字符下标，计算出光标的位置
       *
       * @param {string} value - 格式化之后的值
       * @param {number} charIndex - 光标前一个字符的下标
       * @return {number} 光标的位置
       */
      function getCursorIndex(value, charIndex) {
        if (charIndex < 0) {
          // 如果期望光标前面没有字符，则光标位置为 0
          return 0;
        }
        // 计算格式化之后，字符所在的位置
        let curCharIndex;
        let count = -1;
        for (let i = 0; i < value.length; i++) {
          if (value.charAt(i) !== ' ') {
            count += 1;
          }
          if (count === charIndex) {
            curCharIndex = i;
            break;
          }
        }/**
         * 格式化手机号，133 3333 3333格式
         *
         * @param {string} value - 输入框内容
         * @return {string}
         */
        function format(obj){
          let value = valid(obj.value);
          if (!value) {
            return value;
          }
          value = value.replace(/\s*/g, '');
          if (value.length > 3 && value.length < 8) {
            return value.substr(0, 3) + " " + value.substr(3);
          } else if (value.length >= 8) {
            return value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7);
          }
          console.log(value);
          obj.value = arr.join(' ');
          return obj.value;
        }
      }

[Link 1]: https://blog.whezh.com/format-input-set-cursor-index/

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript删除字符串最后一位

使用方法：substr（）语法： > stringObject.substr(start, length) 描述：substr（）方法可在字符串中提取从start下标

我会带着你远行/ 2022年12月23日 15:25/ 0 赞/ 179 阅读

相关 php 删除最后一行,php如何删除文件最后一行内容

php删除文件最后一行内容的方法：首先利用fopen()函数打开一个文件；然后利用fgets()函数从打开的文件中读取一行内容，并将其保存到数组中；最后利用array\_pop

刺骨的言语ヽ痛彻心扉/ 2022年11月12日 09:54/ 0 赞/ 296 阅读

相关输入框input组件在Safari光标占满的问题

![图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b

绝地灬酷狼/ 2022年11月05日 05:16/ 0 赞/ 75 阅读

相关 JavaScript - 删除字符串最后一位与根据指定符号删除符号后的字符

前言有时候，我们需要删除字符串的最后一位，下面的方法允许你删除固定最后一位，也可以根据符号删除。删除最后一位很简单，不管是什么字符串，直接删除最后一位。

小咪咪/ 2022年10月27日 00:26/ 0 赞/ 190 阅读

相关 vue js对input输入数字后两位(金额输入框)

js控制input框只能输入数字和一位小数点和小数点后面两位小数 html代码 <input id="money" type="number" step="1"

矫情吗；*/ 2022年10月22日 07:40/ 0 赞/ 355 阅读

相关 [python]字符串截取：从后往前的某后位置到最后一位表示方式

str2 = str1\[-4:\]\表示从倒数第4位到最后，如str1 = '123.jpg',那么str2='.jpg' ![20210910083831458.p

Dear 丶/ 2022年09月11日 00:13/ 0 赞/ 117 阅读

相关 android将输入框光标自动移到输入文字最后面

在Activity文件中： EditText et = (EditText)findViewById(R.id.inbox); et.setSelection

Myth丶恋晨/ 2022年06月05日 02:51/ 0 赞/ 254 阅读

相关输入框内容格式化后从中间删除光标移至最后一位的问题

转自博文：[格式化输入框内容后定位光标位置][Link 1] 具体计算规则监听 keydown 事件，获取当前光标的位置。根据输入框的内容和光标位置，计算出当前

淩亂°似流年/ 2022年03月22日 18:58/ 0 赞/ 107 阅读

相关如何让移到输入框，显示输入框中所有的内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

野性酷女/ 2022年02月23日 05:38/ 0 赞/ 248 阅读

相关连载内容移至“Archived”分类

自己租了域名和空间，连载内容此处不再更新。欢迎继续到以下位置关注本人连载内容（英文、简体中文和繁体中文版同步推出和更新）： [http://www.gaobo.

Love The Way You Lie/ 2021年12月20日 15:09/ 0 赞/ 162 阅读