Unique CSS styles for " " and "-" when user types in input-CodePudding

When the user types in in my input, I would like the to be green

Ex: 10000 --> " " should be green and 10000 should be black

When the user types in - in my input, I would like the - to be red

Ex: -10000 --> "-" should be red and 10000 should be black

My idea was to use ::first-letter, but I realize it doesn't work on input

Is this possible at all with css and javascript? Do I need some fancy Regex to accomplish this?

input {
  font-size: 100px;
}

/* only - should be red */
input::first-letter {
  color: red;
}

/* only   should be green */
input::first-letter {
  color: green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="styles.css" />
    <title>Static Template</title>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

CodePudding user response：

First get the <input> element with .getElementsByTagName('input')[0], then you can attach an event listener on keyup. From here, you can use .style.color to update the color based on .value[0]:

Show code snippet

const target = document.getElementsByTagName('input')[0];
target.addEventListener('keyup', function() {
  if (this.value[0] === '-') {
    this.style.color = 'red';
  }
  else if (this.value[0] === ' ') {
    this.style.color = 'green';
  }
  else {
    this.style.color = 'black';
  }
})

input {
  font-size: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="styles.css" />
  <title>Static Template</title>
</head>

<body>
  <input type="text" />
</body>

</html>

Note that the above snippet only checks the first character inputted. If you want to check for any occurrence of the target character, you can loop over the .value.