【问题标题】:Firefox draws red border on required select boxFirefox 在所需的选择框上绘制红色边框
【发布时间】:2013-06-17 00:56:39
【问题描述】:

当绑定到 angularjs-model 时,Firefox 21 在所需的选择框周围绘制红色边框。

<select ng-model="color" ng-options="c.text for c in colors" required>
   <option value="">-- choose color --</option>
</select>

有没有办法让 Firefox 选择(或不选择)项目后验证输入?

→ A fiddle to demonstrate the problem

【问题讨论】:

  • 在你的小提琴中没有“必需”的输入元素......
  • 对不起,丹。我有错误的链接。请再试一次。谢谢。

标签: html validation angularjs


【解决方案1】:

要解决这个问题,您可以在表单为原始时禁用所需的样式:

.ng-pristine .ng-invalid-required {
    box-shadow: none;
}

在用户输入无效数据后(ng-pristine 类已更改为 ng-dirty),box-shadow 将再次显示 b/c,此规则将不再适用。

【讨论】:

  • 不应该是.ng-pristine.ng-invalid-required(之间没有空格)来将其应用于单个元素而不是父/子结构吗?
  • 根据我的上述评论,请参阅 liqian 的回答。在评论之前我没有注意到它。
  • 我已经为此提交了一个错误,因为此解决方法仅适用于 Angular(根据问题):bugzilla.mozilla.org/show_bug.cgi?id=1399046
【解决方案2】:

这实际上与 AngularJS 无关,而是您可以通过 CSS 控制的浏览器功能。

看看这个 MDN 文档:https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid 和这个问题:Firefox 4 Required input form RED border/outline

有了这个 CSS,Firefox 的行为似乎与 Chrome 相同:

select:invalid {
    box-shadow: none;
}

http://jsfiddle.net/xLmC2/6/

【讨论】:

  • 这是个好消息。但我实际上希望 Firefox 验证输入。但是,如果 Firefox 在用户选择任何内容之前 将边框涂成红色,这似乎没有任何意义。如果可以教 Firefox 仅在 用户操作之后验证选择字段......
  • 似乎是 angularjs 的一个奇怪错误。 FF 在输入字段模糊后进行验证。角度验证器似乎点击了表单中的每个字段,因此 FF 认为用户点击了它们。仍然没有解决办法。我们使用了一种解决方法。
  • 是的,这个错误与 Angular 无关。实际上 Angular/Redux-Forms 为您提供了使用原始类很容易修复此错误的工具。不幸的是,在 :invalid 上禁用 box-shadow 并不是一个很好的解决方案。
【解决方案3】:

@klamping:您的解决方案有点用,但是:一旦您开始在 another 字段中输入,您的字段就会出现红色阴影(因为 form.ng-pristine 不再存在)。

更好的方法:

.ng-untouched.ng-invalid-required { box-shadow:none; }

缺点:当用户提交表单而未点击此字段时,不会显示红色阴影(但弹出工具提示 已显示)。

@DanEEStar:仅当 AngularJS 存在 时才会出现问题。您的解决方案确实有效,但完全破坏了红色突出显示(即在表单提交之后)。

我在这里为 AngularJS 创建了一个错误报告: https://github.com/angular/angular.js/issues/12102

例子:

<div ng-app>
<form>
<input type="text" ng-model="a" required>
</form>
</div>

这是小提琴:https://jsfiddle.net/5yh58orm/11/

【讨论】:

    【解决方案4】:

    Thomas Landauer 的解决方案有点用 :),但是一旦您单击/聚焦该字段,字段阴影就会再次变为红色,

    我建议使用:

    .ng-pristine.ng-invalid-required { box-shadow:none; }
    

    【讨论】:

      【解决方案5】:

      对于 angular2,这是:

      .ng-pristine.ng-invalid {
        box-shadow: none;
      }
      

      【讨论】:

        【解决方案6】:

        要完全删除它,请输入 css:

        :-moz-ui-invalid:not(output) {
            box-shadow: none;
        }
        

        【讨论】:

          【解决方案7】:

          当我在表单外使用选择框时遇到了同样的问题。当我这样做时,问题得到了解决:

          <form novalidate>
              <select>
              <option value=""></option>
              </select>
          </form>
          

          我认为这是浏览器的事情,与角度无关?

          【讨论】:

            猜你喜欢
            • 2019-09-17
            • 2016-07-23
            • 2011-04-18
            • 1970-01-01
            • 2020-07-16
            • 1970-01-01
            • 2011-08-21
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多