首页 > 解决方案 > 为什么我不能删除输入字段中的字符

问题描述

我正在创建一个功能以]在用户按下[输入字段时自动添加一个完美运行的功能

const input = document.getElementById("input");

function add(){
  if(input.value === "["){
  input.value = "[]";
  }
}
<input id="input" oninput="add()">

但是我输入后[输入值变成了[],我不能backspace按键删除“]”,我必须用delete键从后面删除它,为什么会这样?

标签: javascripthtmldom

解决方案


这是一个非常常见的问题,之前有一篇关于这个的帖子,但是你的问题的解决方案应该是这样的:

const brackets = new Map([
  ['{', '}'],
  ['[', ']'],
  ['(', ')']
]);
    
const input =document.querySelector('.input');

input.addEventListener('input', (e) => {
    const origin = e.target;
    const pos = origin.selectionStart;
    const val = [...origin.value];
    
    const char = val.slice(pos-1, pos)[0];
    const bracket = brackets.get(char);
    
    if (bracket) {
      val.splice(pos, 0, bracket);
      origin.value = val.join('');
      origin.selectionEnd = pos;
    }
});
<input class="input">

有什么不懂的可以追问:)


推荐阅读