How to Update Placeholder Color Using JavaScript

How to update placeholder color using Javascript?

Use CSS variables. You can also target only the needed element

function update() {  document.querySelector('input[type=text]').style.setProperty("--c", "blue");}

::placeholder {  color: var(--c, red);}

<input type="text" placeholder="I will be blue"><input type="number" placeholder="I will remain red"><button onclick="update()">change</button>

How to change the colour of placeholder using javascript?

You can't really modify pseudo-selectors with JavaScript. You'll have to modify an existing a element.

If possible, make a class:

.your-class::-webkit-input-placeholder {
    color: #b2cde0
 }

And add it to the element:

$('input').addClass('your-class');

Or if you want to use pure JS, do this:

x.classList.add('your-class');

How do i change the color of the placeholder text in an input type=text if a certain value is submitted?

Normally in CSS you would use the ::placeholder selector to modify placeholder color. In JavaScript, you can't really modify CSS pseudo selectors, so you'll have to assign a specific class to each placeholder color like so:

var input = document.getElementById("searchAdress");
function validate(){
  var value = input.value;
  if(value.length>0){
    //Valid
    input.value="";
    input.placeholder="Got it";
    clearOtherClasses(input);
    input.classList.add("green");
  }else{
    //Invalid
    input.value="";
    input.placeholder="Nope";
    clearOtherClasses(input);
    input.classList.add("red");
  }
}
function clearOtherClasses(element){
  element.className="";
}

.green::placeholder{
  color:green;
}
.red::placeholder{
  color:red;
}

<input  type="text" id="searchAdress" placeholder="Type an adress, city or country"><button onclick="validate()">validate</button>
<hr>
Enter nothing to toggle red placeholder text. Enter something to toggle green.

How can I change the color of a placeholder in a text input

You could use background-clip and a linear-gradient where browsers can handle it:

possible example:

input::placeholder {
  background: linear-gradient(to right, yellow 3em, red 3em);
  background-clip: text;
  color: transparent;
  font-weight: bold;
  opacity: 1;/* because i want to see the yellow part ! */
}

<input placeholder="Some text">

How to change placeholder color to transparent with javascript

You don't need javascript to do that unless you have some condition try to add classes to the input and then go with sass or plain css :

input#search::placeholder{
color:red;}

with sass :

input{
&#search{
    &::placeholder{
        color : red
    }
 }
}

in case you want to use javascript just add a class on a click event for exemple like that :

var d = document.getElementById("div1");
d.className += " otherclass";

an then :

input.otherclass::placeholder{
 color:red;
}

How to add different placeholder color

you need to be more specified:

if you put ::-webkit-input-placeholder in the CSS, you will select all placeholders... but this is not what we want

so using :nth-of-type(); a pseudo-class, you can select the wanted one, easily.

useful documentations:

nth-of-type MDN documentation

so the code will be like this:

/* 1 */

input:nth-of-type(1)::-webkit-input-placeholder {
  color: green;
}


/* 2 */

input:nth-of-type(2)::-webkit-input-placeholder {
  color: blue;
}


/* 3 */

input:nth-of-type(3)::-webkit-input-placeholder {
  color: red;
}

<!-- 1 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 2 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 3 -->
<input type="text" name="" id="" placeholder="hello world">

Changing color of placeholder text on focus with JavaScript

Believe you need vendor prefixes (From css-tricks.com):

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Using javascript you would only be applying similar styling (using vendor prefixes) programmatically on a focus event.

Edit: In fact these styles I don't think can be applied using javascript. You would need to create a class and apply that using js.

CSS:

input.placeholderred::-webkit-input-placeholder {
   color: red;
}

JQuery:

var $textInput = $('#TextField1');
$textInput.on('focusin',
    function () {
         $(this).addClass('placeholderred');
    }
);

$textInput.on('focusout',
    function () {
         $(this).removeClass('placeholderred');
    }
);

JS:

var textInput = document.getElementById('TextField1');
textInput.addEventListener('focus',
    function () {
         this.classList.add('placeholderred');
    }
);

textInput.addEventListener('blur',
    function () {
         this.classList.remove('placeholderred');
    }
);

And courtesy of the most helpful, Armfoot, a fiddle: http://jsfiddle.net/qbkkabra/2/

How to Update Placeholder Color Using JavaScript