Question

我有一个input，其中maxLength为1。我希望如果我在输入中键入另一个value（键）当前 value（字母），将被新的value（键的字母 ）代替。

我已经尝试过类似的事情：

container.addEventListener('keyup', function (e) {
    var target = e.srcElement || e.target;
    var letter = target.value;
    var newLetter = letter.replace(/letter/g, letter);
    letter.value = newLetter;
});

Answer 1

您可以使用this.value更新输入框的值，并使用e.key按下键。但是，如果按此键，将输入元键：

const container = document.getElementById('container');
container.addEventListener('keyup', function(e) {
  this.value = e.key;
});

<input type="text" id="container" maxlength="1" />

通过使用正则表达式检查e.key是否为字母/数字字母，可以解决meta键的问题：

const container = document.getElementById('container');
container.addEventListener('keyup', function({key}) {
  if(/^[a-z0-9]$/i.test(key)) {
    this.value = key;
  }
});

<input type="text" id="container" maxlength="1" />

Answer 2

这适用于所有单字符输入，但不包括空格字符：

let container = document.getElementById('container');

container.addEventListener('keyup', function (e) {
  let valueLength = this.value.length;

  if(this.value == " ") {
      this.value = "";
      return;
  }
  
  if(valueLength == 1) {
    if( !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey 
        && e.code != "Space" && e.key.length == 1) {
      this.value = e.key;
    }
  }
});

<input id="container" type="text" value="" maxLength="1" />

键入JS时替换输入值

2 个答案: