Question

我想更改填充文本并失去焦点时填充文本的颜色。我创建的表单要求至少填写一个字段。

我尝试过:required，:valid，但这会更改所有字段的颜色

<form action="h.php" method="post" onsubmit="return formcheck()">
    <div class="least1">
        <label for="cb1">MAKAUT Development Fees:</label>
        <input type="text" name="cb1" value="" placeholder="0"><br>
    </div>
    <div class="least1">
        <label for="cb2">MAKAUT Registration Fees:</label>
        <input type="text" name="cb2" value="" placeholder="0"><br>
    </div>
    <button>Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    function formcheck(){
        var total=0;
        var fields = $(".least1")
        .find("input").serializeArray();
        $.each(fields, function(i, field) {
            if (field.value!="")
                total=total+parseInt(field.value);
        }); 
        // console.log(fields);
        if(total==0){
            alert("Fill at least one field.");
            return false;
        }
        else{
            if(confirm("Total amount to be paid= "+total))
                return true;
            else
                return false;
        }
    }
    jQuery(function ($) {
        var $inputs = $('input[name=cb1],input[name=cb2]');
        $inputs.on('input', function () {
            // Set the required property of the other input to false if this input is not empty.
            $inputs.not(this).prop('required', !$(this).val().length);
            $inputs.css({
                "border-color": "red", 
                "font-weight": "bold"
            }) ;
        });
    });

</script>

所有字段更改颜色，而不是一种。

Answer 1

$(document).on("focusout","input",function(){
 if($(this).prop('required'))
   if(!$(this).val())
    {
     $(this).css({
            "border-color": "red", 
            "font-weight": "bold"
        }) ;
    }
});

Answer 2

我只是用focusout方法更新了您的方法。试试这个，希望对您有所帮助。谢谢

$("input[name=cb1],input[name=cb2]").focusout(function(){
   $(this).css({"border-color": "red", "font-weight": "bold"});
});

焦点方法示例- Link

<form action="h.php" method="post" onsubmit="return formcheck()">
    <div class="least1">
        <label for="cb1">MAKAUT Development Fees:</label>
        <input type="text" name="cb1" value="" placeholder="0"><br>
    </div>
    <div class="least1">
        <label for="cb2">MAKAUT Registration Fees:</label>
        <input type="text" name="cb2" value="" placeholder="0"><br>
    </div>
    <button>Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    function formcheck(){
        var total=0;
        var fields = $(".least1")
        .find("input").serializeArray();
        $.each(fields, function(i, field) {
            if (field.value!="")
                total=total+parseInt(field.value);
        }); 
        // console.log(fields);
        if(total==0){
            alert("Fill at least one field.");
            return false;
        }
        else{
            if(confirm("Total amount to be paid= "+total))
                return true;
            else
                return false;
        }
    }
    $("input[name=cb1],input[name=cb2]").focusout(function(){
      $(this).css({"border-color": "red", "font-weight": "bold"});
    });

</script>

Answer 3

当您有一个占位符时，您可以使用以下方法：

.myInput:not(:placeholder-shown):not(:focus) { /* change stuff */ }

如果表单没有值，则将显示占位符。因此，如果它有一个值/用户输入了一些数据（又名：placeholder-shown不正确），并且它失去了焦点（又名：focus不正确） -将应用样式。

失去焦点时更改填充文本框的颜色

3 个答案: