Question

我在文本框中收到了一个电子邮件ID。因此，每当我输入错误的格式化电子邮件时，文本框的背景颜色都应该更改。

这是我的jquery代码：

$(function() {
    $(':text').hover(function () {
        this.style.backgroundColor="black"},
        function() {
            this.style.backgroundColor = "transparent"});
});

这是我的HTML代码：

<div>
    <input type="text" placeholder="enter email" ng-blur="visitedEmail = true" name="email" />
    <p class="error" ng-show="myform.email.$invalid && !myform.email.$pristine &&visitedEmail">Invalid email!</p>
</div>

在上面的代码中，我使用了ng-blur，所以当我失去焦点时，必须完成动作。现在我需要在失去焦点时更改文本框的背景颜色（错误的电子邮件格式）。

我的代码有什么问题，并提供一些解决此问题的提示..

Answer 1

您希望使用ng-class指令来实现此目的。

它的作用是根据条件应用/删除css类。所以你希望红色背景css类在错误条件下显示。

看起来应该是这样的：

标记：

<input type="text" placeholder="enter email" ng-blur="visitedEmail = true" 
name="email" ng-class="{red-background: myform.email.$invalid && 
!myform.email.$pristine && visitedEmail }"

CSS：

.red-background {
  background: red;
}

希望这有帮助。

Answer 2

尝试

    <div>
        <input id="EmailTextBox" type="text" placeholder="enter email" name="email" onblur="ValidateEmail();" />
    </div>
    <script>
        function ValidateEmail()
        {
        var emailTextBox = document.getElementById("EmailTextBox");
        if(//checksForValidity
           emailTextBox.value != "")
            return true;
        else
            emailTextBox.style.backgroundColor = "black";

        }

发生错误时如何更改文本框背景颜色？

2 个答案: