Changing Textbox Border Colour Using JavaScript

How to change border color of the html input when

Attach blur event to the input.

document.querySelectorAll('input').forEach((input) => {  input.addEventListener('blur', function() {    this.classList.toggle('green', this.value.length > 0);  });});

.green {    border: 2px solid green;}

<input type="text"><input type="text"><button>Click Me</button>

Change border color of textbox when it is clicked inside of it

Use this CSS style rule:

.min-max-input:focus {
  outline: 3px ridge cyan
}

What makes outline different from border is that border lengths are counted in measurements while outline isn't. Besides the fact that you don't need to remember to include it in measuring dimensions, there isn't a shift when it appears and disappears. The pseudo-class :focus works like the focus event to a lesser degree.

Demo

input {
  font: inherit;
  display: inline-block;
  margin: 5px auto
}

/* box-shadow optional */

.min-max-input:focus {
  outline: 3px ridge cyan;
  box-shadow: 1px 1px 3px 4px rgba(0, 187, 150, 0.5);
}

.min-max-input.sangre:focus {
  outline: 3px ridge tomato;
  box-shadow: 1px 1px 3px 4px rgba(235, 66, 48, 0.5);
}

.min-max-input.verdant:focus {
  outline: 3px ridge lime;
  box-shadow: 1px 1px 3px 4px rgba(111, 255, 111, 0.5);
}

.min-max-input.flaxen:focus {
  outline: 3px ridge gold;
  box-shadow: 1px 1px 3px 4px rgba(220, 230, 70, 0.5);
}

<span class="min-max">
    <input class="min-max-input" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

<span class="min-max">
    <input class="min-max-input sangre" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

<span class="min-max">
    <input class="min-max-input verdant" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

<span class="min-max">
    <input class="min-max-input flaxen" type="number" 
           ng-blur="$ctrl.blur('text')" ng-change="$ctrl.changeText('text')"
           ng-model-options="{debounce: 500}" ng-model="$ctrl.text">
</span>

How to change bordercolor based on value of textbox? using javascript

Here is a more elegant way to achieve this effect:

http://jsfiddle.net/elias94xx/eqKqS/

HTML

<textarea id="test"></textarea>

CSS

#test { border-color: red; }
#test:focus { border-color: green !important; outline: none; }

document.getElementById("test").addEventListener("keydown", controlBorderColor, false);
document.getElementById("test").addEventListener("keyup", controlBorderColor, false);

function controlBorderColor() {
  if (this.value.length == 0) { this.style.borderColor = "red"; }
  else { this.style.borderColor = "blue"; }
}

Change border color Javascript

I corrected your snippet to make it work. You just need to access the style.borderColor of your HTML element.

#borders is for id="borders", so i changed for .borders and added the CSS class borders to your
element
The 'solid' value is meant for border-style property
Your 'promptUser' variable doesn't exists so I changed it with static text

Hope this helps !

 var getColor = prompt("Choose your color ", "Enter the  color "); var color; var el = document.getElementById("color"); el.innerHTML = "Whatever paragraph message."; if (getColor =="Yellow" || getColor =="yellow" || getColor =="YELLOW"){     color = "#FFFF66";     el.style.borderColor = color; }

 .borders{    background-color:#00ffff;    border-color:#000000;    border-width:2px;    border-style:solid;}

 <p id="color" class="borders"></p>

JavaScript change input field border color when detect one of specific inputs

A few issues:

cisla is an id, not a class name
you don't have any event binded to your zmenitBarvu function
you aren't applying the borders to the input elements themselves nor checking the values on them, but only the form with id cisla
else will overwrite styles set when "0" is matched with value, because else is on anything that's not "2" only. You need to chain the else if so only one executes.

Demo using event delegation. I recommend just using the same class name so they use the same selector for class, and same name (unless form data requires incremented names), and not using an id at all, since it's unnecessary. I'm using cislo prefixed class name input elements selector to match elements:

function zmenitBarvu() {    document.getElementById("cisla").addEventListener('input',event=>{    var inputVal = event.target;    if(!inputVal.matches('input[class^=cislo]')) return;
    if (inputVal.value === "0") {         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');    }    else if (inputVal.value === "2") {         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');    }    else {        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');    }
    });}zmenitBarvu()

<div class="form">    <form id="cisla">         <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>        <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>        <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>        <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>        <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>        <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>        <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>        <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>        <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>        <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>        <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>        <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>    </form></div>

On Text Entered Change Textbox border color

It's because you forgot to include jQuery in your fiddle.

Choose jQuery from the Frameworks and Extensions tab and it should work.

Updated Fiddle

Edit: Based on your comment, you need to use:

$('#item_availability1_unlimited').on('change', function () {

    if ($('#item_availability1_unlimited').is(':checked')) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
}).change();

$('#item_availability1').on('keyup', function () {
 if ($(this).val().length > 0) {
        $('#item_availability1').css('border', '2px solid #11b818');
    } else {
        $('#item_availability1').css('border', '2px solid #F00');
    }
});

Updated Fiddle

How do I change the border color of an input text when user types in

This should work: http://jsfiddle.net/GQSsw/

HTML:

<input id="element" />

Javascript:

document.getElementById('element').onkeydown = function() {
    this.className= 'edited';
}

CSS:

input {
    border: 1px solid red;
}

input:focus {
    border: 1px solid green;
}

input.edited {
    border: 1px solid yellow;
}