Search results

Change the Color of the TextBox Based on its Value in JavaScript TextBox control

05 Mar 2021 / 1 minute to read

You can change the color of the TextBox by validating its value using regular expression in the keyup event for predicting the numeric values as demonstrated in the following code sample.

Source
Preview
index.html
index.ts
index.css
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextBox Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>



           <label>Normal Input</label>
                <div class="e-input-group">
                    <input class="e-input" type="text" placeholder="Enter numeric values" onkeyup="onKeyup(this)" />
                </div>
          <label> Floating Input </label>
                <div class="e-float-input">
                    <input type="text" onkeyup="onKeyup(this)" required />
                    <span class="e-float-line"> </span>
                    <label class="e-float-text">Enter numeric values</label>
                </div>




            <div id="input-container">
          </div>
        </div>
    </div>
</body>
</html>
Copied to clipboard
// To get the all input fields and its container.

let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

for (let i = 0; i < inputElement.length; i++) {
    inputElement[i].addEventListener("focus", function () {
        let parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.add('e-input-focus');
        } else {
            this.parentNode.classList.add('e-input-focus');
        }
    });
    inputElement[i].addEventListener("blur", function () {
        let parentElement = this.parentNode;
        if (parentElement.classList.contains('e-input-in-wrap')) {
            parentElement.parentNode.classList.remove('e-input-focus');
        } else {
            this.parentNode.classList.remove('e-input-focus');
        }
    });
}


// To Configure RegExp for predicting Numeric values on keyUp event function

function onKeyup(e) {
    let str = e.value.match(/^[0-9]+$/);
    if (!((str && str.length > 0)) && e.value.length) {
       e.parentElement.classList.add('e-error');
    } else {
      e.parentElement.classList.remove('e-error');
    }
}
Copied to clipboard
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}


#input-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

.e-input-group.e-error .e-input { /* csslint allow: adjoining-classes */
  color: #f44336;
}

.e-float-input.e-error input { /* csslint allow: adjoining-classes */
  color: #f44336;
}

.wrap label { /* csslint allow: adjoining-classes */
 font-weight:bold;
}