changing placeholder text font and color with jquery

Question

I have an input tag of the following form

<input type="text" name="firstname" id="firstname" placeholder="First name">

First I check that the field is not empty using jquery

 $("#submitreg").click(function(e){
     if ($.trim($("#firstname").val())=='')
         {
             $("#firstname").attr('placeholder',"first name can't be empty");
             e.preventDefault();
         }
 });

Now if the input field is empty, I change the placeholder to "first name can't be empty". Is it also possible to change the placeholder color to red and make the font 85% using jquery.

Thanks

how to change the placeholder color to red and make the font of the placeholder 85% using jquery — Ahmed, Apr 10 '18 at 04:27
Possible duplicate of [jQuery change placeholder text color](https://stackoverflow.com/questions/14967250/jquery-change-placeholder-text-color) — Gokul Sandeep, Apr 10 '18 at 04:28
Is your idea that if the textbox is empty then the placeholder will be red and the font is 85%? — Triet Pham, Apr 10 '18 at 04:34
nope. I currently have a placeholder called first name. When I submit form I check if the text area is empty. if it empty I want to change the place holder to "first name cant be empty" and change its color to red and make its font small to notify user that the first name field is empty — Ahmed, Apr 10 '18 at 04:36

Eddie · Accepted Answer · 2018-04-10T08:22:13.870

You can do something like:

$('#form-id').submit(function(e) { //Add event listener on form and not on btn click
  if ($('#firstname').val().trim() === '') { //Check if empty string
    $("#firstname").attr('placeholder', "first name can't be empty"); //Change attribute
    $("#firstname").val(''); //Remove the value so that youll see the new attribute
    $("#firstname").addClass('red'); //Add a class so that placeholder will be red.
    e.preventDefault(); //Prevent the form on sending
  }
});

.red::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: red;
   opacity: 1; /* Firefox */
}

.red:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: red;
}

.red::-ms-input-placeholder { /* Microsoft Edge */
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='form-id'>
  <input type="text" name="firstname" id="firstname" placeholder="First name">
  <input type="submit" value="Submit">
</form>

Thanks how to make sure that is supported by all browsers – Ahmed Apr 10 '18 at 04:45 — Ahmed, Apr 10 '18 at 04:45

Tan Duong · Answer 2 · 2018-04-10T04:52:42.213

I think this is what are you looking for

This css will not support for all browsers

-webkit-input-placeholder, ::placeholder, ::-moz-placeholder, :-ms-input-placeholder prefer Browser compatibility in those links

$("#submitreg").click(function(e){
     $("#firstname").val($.trim($("#firstname").val()));
     if ($.trim($("#firstname").val())=='')
         {
             $("#firstname").attr('placeholder',"first name can't be empty");
             $("#firstname").addClass('your-class');
             e.preventDefault();
         } else {
              $("#firstname").removeClass('your-class');
         }
         
 });

.your-class:-moz-placeholder{
    color: red;
    font-size: 20px;
}
.your-class::placeholder{
    color: red;
    font-size: 20px;
}
.your-class:-ms-input-placeholder{
    color: red;
    font-size: 20px;
}
.your-class::-webkit-input-placeholder {
    color: red;
    font-size: 20px;
}


input {
   height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="firstname" id="firstname" placeholder="First name" />

<button type="submit" id="submitreg">Submit</button>

thats exactly what I am looking for. my question is this supported by all browsers — Ahmed, Apr 10 '18 at 04:43
See my edit post. I already attached the browser support for each css `pseudo-class` — Tan Duong, Apr 10 '18 at 04:57

Triet Pham · Answer 3 · 2018-04-10T05:00:56.157

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .your-class1::-webkit-input-placeholder {
        color: red
    }
    .your-class2::-webkit-input-placeholder {
        color: black
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script>
        $( document ).ready(function() {
          //Attach change event to textbox
          $("#textbox1").change(function() {
              //Check if value is empty or not
              if ($(this).val() == "") {
                  //if empty then assign the border
                  $("#textbox1").addClass('your-class1');
             }
            else
            {
              $("#textbox1").addClass('your-class2');
            }
          });
        });  

        function validatetextbox()
        {
          var txtval = $("#textbox1").val();
          //Check if value is empty or not
          if (txtval == "") {
               //if empty then assign the border
              $("#textbox1").addClass('your-class1');

          }
          else
         {
             $("#textbox1").addClass('your-class2');
         }
        }
      </script>

    </head>
    <body>
      <input type="text" id="textbox1" placeholder="Placeholder text...">
      <input type="submit" value="Submit" onclick="validatetextbox()">
    </body>
    </html>

changing placeholder text font and color with jquery

3 Answers3