Question

我有以下表格的输入标签

<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();
         }
 });

现在，如果输入字段为空，我将占位符更改为＆＃34;第一个名称不能为空＆＃34;。是否也可以将占位符颜色更改为红色，并使用jquery将字体设置为85％。

由于

Answer 1

您可以执行以下操作：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我认为这就是你在寻找什么

此css不支持所有浏览器

这些链接中的

-webkit-input-placeholder，::placeholder，::-moz-placeholder，:-ms-input-placeholder更喜欢Browser compatibility

＆＃13;

$("#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');
         }
         
 });

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

3 个答案: