Question

如何在用JavaScript更改文本后更改CSS占位符背景颜色？

我想进行输入验证我在输入表单无效时设置了样式。但是在javascript更改占位符文本后它无效。

在用户再次填写输入后，它可以正常工作

CSS

.common-form input[type="text"]:invalid:focus,
.common-form input[type="email"]:invalid:focus,
.common-form input[type="number"]:invalid:focus,
.common-form input[type="search"]:invalid:focus,
.common-form input[type="password"]:invalid:focus,
.common-form textarea:invalid:focus,
.common-form select:invalid:focus { 
  border-color: rgb(248,66,66);
  background-color: rgb(248,46,46);
  color: #fff;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
}

JAVASCRIPT

$("#dftrnama").change(function () {
    $.ajax({
        url: "ajax/ceknama",
        data: {
            "nama": $(this).val()
        },
        method: "POST",
        success: function (result) {
            if (result == '1') {
                $("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus().blur();
                $("input[type='submit']").attr("disabled", true);
                $("#dftremail").attr("disabled", true);
                $("#dftrhp").attr("disabled", true);
            } else {
                $("input[type='submit']").removeAttr("disabled");
                $("#dftremail").removeAttr("disabled");
            }
        }
    });
});

Answer 1

您不需要调用blur()，当调用方法时元素会失去焦点，因此不会应用CSS规则。

$("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus();

 
//To simulate `$.ajax()`
setTimeout(function() {
  $("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus();
}, 5000)

.common-form input[type="text"]:invalid:focus,
.common-form input[type="email"]:invalid:focus,
.common-form input[type="number"]:invalid:focus,
.common-form input[type="search"]:invalid:focus,
.common-form input[type="password"]:invalid:focus,
.common-form textarea:invalid:focus,
.common-form select:invalid:focus {
  border-color: rgb(248, 66, 66);
  background-color: rgb(248, 46, 46);
  color: #fff;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248, 66, 66);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248, 66, 66);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248, 66, 66);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="dftrnama" value="test">

Answer 2

$('.elementclass').css('background-color','blue');

在应用程序的正确位置将其添加到您的javascript中。

我假设你的意思是

Answer 3

也许：

$("#dftrnama").change( function(){
  $.ajax({
    url: "ajax/ceknama",
    data: { "nama" : $(this).val() } ,
    method: "POST",
    success: function(result){
        if( result == '1') {
            $("#dftrnama").attr("placeholder", "Nama Ini Sudah Ada!").val("").focus().blur();
            $("input[type='submit']").attr("disabled", true);
            $("#dftremail").attr("disabled", true);
            $("#dftrhp").attr("disabled", true);
        } else {
            $("input[type='submit']").removeAttr("disabled");
            $("#dftremail").removeAttr("disabled");
            $('#dftrnama').css('background-color','#FFF')
        }
    }
});

如何在使用Javascript更改后更改CSS占位符颜色

3 个答案: