Replace input value on typing in JS

Question

I have an input with maxLength of 1. I want that if I type another value (key) the current value (letter) that inside the input will be replaced with the new value (letter of key).

I've tried something like that:

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;
});

but if you limit the maxlength to 1 how will you be able to type another letter? — Professor Abronsius
– Professor Abronsius, Commented Dec 9, 2019 at 11:51
@RamRaider as I said, I don't want another letter, I want the letter to be replace on each time I type in new value.. — user12499410
– user12499410, Commented Dec 9, 2019 at 11:54

Nick Parsons · Accepted Answer · 2019-12-09 13:25:16Z

5

You can update the value of the input box using this.value and get the key pressed using e.key. This will, however, enter meta keys if pressed:

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

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

The issue with the meta keys could be fixed by checking whether or not e.key is an alphabetic/digit letter by using a regular expression:

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" />

edited Dec 9, 2019 at 13:25

answered Dec 9, 2019 at 11:55

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Krzysztof Krzeszewski Over a year ago

please add some form of a validation in case of special keys, for instance if i were to press Enter the input field value will be a string "Enter" which is probably not what the author intended

Nick Parsons Over a year ago

@KrzysztofKrzeszewski Hi, thanks for the tip. I've added some validation (in the second code snippet)

KooiInc Over a year ago

event.keyCode is deprecated: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Nick Parsons Over a year ago

@KooiInc oh, you're right, what would be a better alternative to get the key code? (.code will give a string)

KooiInc Over a year ago

@NickParsons The {key}-check is fine, the RegExp can be simplified to /^[a-z0-9]$/i. Up for discussion is if you want to use this or event.target

|

Ivan86 · Accepted Answer · 2019-12-09 12:16:24Z

1

This works for all single character inputs while excluding the space character:

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" />

edited Dec 9, 2019 at 12:16

answered Dec 9, 2019 at 12:10

Ivan86

5,7182 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Replace input value on typing in JS

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related