使用 jquery 更改占位符文本字体和颜色答案

【问题标题】：changing placeholder text font and color with jquery使用 jquery 更改占位符文本字体和颜色
【发布时间】：2018-09-19 13:55:36
【问题描述】：

我有一个如下形式的输入标签

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

首先我使用 jquery 检查该字段是否为空

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

现在如果输入字段为空，我将占位符更改为“名字不能为空”。是否也可以将占位符颜色更改为红色并使用 jquery 将字体设置为 85%。

谢谢

【问题讨论】：

你的问题是什么？
如何使用jquery将占位符颜色更改为红色并使占位符的字体为85%
jQuery change placeholder text color的可能重复
@GokulSandeep 这些解决方案不起作用
你的想法是，如果文本框是空的，那么占位符会是红色，字体是 85%？

标签： jquery html forms input

【解决方案1】：

你可以这样做：

$('#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>

【讨论】：

感谢如何确保所有浏览器都支持

【解决方案2】：

我想这就是你要找的东西

此 CSS 将不支持所有浏览器

-webkit-input-placeholder、::placeholder、::-moz-placeholder、:-ms-input-placeholder 在这些链接中更喜欢Browser compatibility

$("#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>

【讨论】：

这正是我想要的。我的问题是所有浏览器都支持这个
查看我的编辑帖子。我已经为每个 css pseudo-class 附加了浏览器支持

【解决方案3】：

<!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>

【讨论】：