首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

输入字段有问题,仅在IE11 (Angular8)中显示红色边框验证

问题描述: 输入字段有问题,仅在IE11 (Angular8)中显示红色边框验证。

解决方案: 这个问题是由于IE11对于某些CSS属性的支持不完善导致的。在Angular8中,可以通过以下步骤解决该问题:

  1. 使用polyfills:在polyfills.ts文件中,确保以下polyfills被启用:
    • import 'classlist.js';
    • import 'web-animations-js';
  • 使用IE11的CSS Hack:在样式文件中,为IE11添加特定的CSS样式,以覆盖默认样式。例如:
  • 使用IE11的CSS Hack:在样式文件中,为IE11添加特定的CSS样式,以覆盖默认样式。例如:
  • 使用IE11的JavaScript Hack:在组件的ts文件中,使用JavaScript代码检测浏览器是否为IE11,并为输入字段添加相应的类名。例如:
  • 使用IE11的JavaScript Hack:在组件的ts文件中,使用JavaScript代码检测浏览器是否为IE11,并为输入字段添加相应的类名。例如:
  • 在模板文件中,根据isIE11的值来添加类名:
  • 在模板文件中,根据isIE11的值来添加类名:
  • 使用Angular的Renderer2:在组件的ts文件中,使用Renderer2来动态添加或移除类名。例如:
  • 使用Angular的Renderer2:在组件的ts文件中,使用Renderer2来动态添加或移除类名。例如:

以上是解决在IE11中显示红色边框验证的一些方法。希望能帮助到你解决这个问题。

关键词解释:

  • 输入字段:指用户在表单中输入数据的区域,通常是文本框、下拉框等表单元素。
  • IE11:指微软的Internet Explorer 11浏览器,是一款老旧的Web浏览器,对于一些新的Web技术支持不完善。
  • Angular8:指Angular框架的第8个主要版本,是一种用于构建Web应用程序的开发平台。
  • 红色边框验证:指在输入字段验证失败时,为输入字段添加红色边框以提示用户输入错误。

腾讯云相关产品推荐:

  • 腾讯云服务器(CVM):提供弹性计算能力,满足各类业务需求。产品介绍
  • 腾讯云CDN:提供全球加速服务,加速内容分发,提升用户访问体验。产品介绍
  • 腾讯云数据库MySQL版:提供高性能、可扩展的MySQL数据库服务。产品介绍
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务。产品介绍
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。产品介绍

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

IE11的CSS兼容性问题

如果改变原有的padding值,那么在IE11生效了。别的浏览器又有问题了。于是在网上搜了一下有没有专门针对IE11的CSShack,就是只对IE11生效的CSS样式,一查还真有。...比如,我在chrome浏览器给一个div设置样式 div{ padding:0 12px; }   那么,在IE11想要实现上面效果,需要在这个下面再添加一行样式   div{ padding...的样式要写在最后面防止被覆盖,当浏览器为IE11时,@media的样式会被执行一遍。   ...还有一个就是IE11针对h5的表单验证部分,验证失败后input标签会出现一个红色的框,比较丑。...这个时候你只要针对专门的input标签,增加一个input{outline:none};就可以将红色边框去掉了。   今天大拿直接一行代码把我之前的IE11兼容性问题全解决了。不服不行。

2.1K40

HTML 表单和约束验证的完整指南

但首先,这里一个重要的警告信息: 客户端验证是一项很好的功能,它可以在应用程序浪费时间和带宽将数据发送到服务器之前防止常见的数据输入错误。它不能替代服务器端验证! 始终清理服务器端的数据。...例如,在下面的代码,每个无效字段都有一个红色边框: :invalid { border-color: #900; } 用户在与表单交互之前会遇到一组令人生畏的红色框。...你可以: 停止验证,直到用户与字段交互或提交表单 使用自定义样式显示错误消息 提供仅在 HTML 无法实现的自定义验证。...(不同之处在于checkValidity()检查是否任何输入受约束验证。) Mozilla 文档解释说: invalid每个无效字段也会触发一个事件。...当它这样做时,分配给该字段的任何自定义验证功能将依次执行。必须全部返回true才能使该字段有效。 无效字段具有invalid应用于该字段的父元素的类,该类使用 CSS 显示红色帮助消息。

8.3K40
  • angular浏览器兼容性问题解决方案

    问题:edge浏览器下,固定列的边框消失 原因:ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3的标签: position: -webkit-sticky...-- 问题:IE浏览器下,初始化表单时,触发表单验证 原因:这个是IE的问题,IE10+实现了input事件,但是触发的时机却是错误的。...这种方式经验证,最终的效果是,初始化表单后,表单输入元素的边框闪烁(红色)一下。...根据angular团队所说,这个插件修复了一个IE10或者IE11的bug,但是提交了太多的代码,这会给增加现有的应用的打包体积,虽然后面关于这个PR讨论了挺久,但是看样子是准备把这个放到FAQ里面,而不会把他并入框架...IE的输入框会因为placeholder为中文而触发表单验证,placeholder改变了也会触发表单验证,所以,一个讨巧的方法,placeholder里面的内容写成英文形式(推荐),但这显然不符合中文产品的需求

    3K30

    CSS3伪类:valid和:invalid实现表单校验

    1、:valid 用于匹配输入值为合法的元素 2、:invalid 用于匹配输入值为非法的元素 3、required 属性规定必需在提交之前填写输入字段 4、pattern 属性规定用于验证输入字段的正则表达式...:valid/:invalid 选择器用于在表单元素的值是合法/非法时设置指定样式。...注意: :valid/:invalid 选择器只作用于能指定区间值的元素,例如 input 元素的 min 和 max 属性,及正确的 email 字段, 合法的数字字段等。...; border: 1px solid #ccc; width: 150px; height: 40px; transition: all 300ms; } // input内容合法,边框颜色是绿色...input:valid { border-color: green; box-shadow: inset 5px 0 0 green; } // input内容非法,边框颜色是红色 input

    1.1K20

    AngularDart4.0 指南- 表单 顶

    这个表格的三个字段的两个是必需的。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意的风格显示验证错误: ?...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定到父组件。 这不是现在的问题,这些未来的变化不会影响表单。...刷新浏览器,然后按照下列步骤操作: 1.看看名字输入。 它有一个绿色的边框。 它具有类形式控制和有效性。 2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入边框变为红色。...名称输入是必需的,清除它将框的轮廓变为红色。 这说明有些事情是错的,但用户不知道什么是错的,或者该怎么做。 利用控件的状态来显示有用的消息。...用于验证和表单元素更改跟踪的NgControl 指令。 输入控件(通过模板引用变量访问)的valid 属性,用于检查控件有效性以及显示/隐藏错误消息。

    17.5K30

    【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )

    */ border: 0; 取消边框后的样式 , 边框在默认时不显示 , 但是将光标移动到 输入框后 , 一层选中 外边框显示出来 ; 设置 outline: none 属性...// 将密码字段的类型设置为文本,以显示密码内容 password.type = 'text'; //...// 将密码字段的类型重新设置为密码,隐藏密码内容 password.type = 'password'; // 更换显示密码的图标为“...// 将密码字段的类型设置为文本,以显示密码内容 password.type = 'text'; //...// 将密码字段的类型重新设置为密码,隐藏密码内容 password.type = 'password'; // 更换显示密码的图标为“

    7110

    最火前端Web组态软件(可视化)

    正文: 1.mxgraph: 介绍:开源免费,但是需要解决的问题很多,国内学习参考资料少。但是,可视化组态的实现基本都是借助于这个框架来实现的。...chrome、firefox、ie11等浏览器是没有问题的。...主要包含了按钮,开关,进度条,信号灯,数码管,时钟,曲线显示控件,仪表盘控件,管道控件,瓶子控件,饼图控件,传送带控件,温度计控件,鼓风机控件,阀门控件,电池控件等等。...目前支持的效果:拖拽(创建组态,布局)、项目管理、页面管理(增加,删除)、属性绑定(样式属性,静态数据)、快捷操作(布局,删除,拷贝,粘贴)、样式复制、预览、服务端支持(目前仅支持node.js开发)...大多数看着很相似,但是人家就说是自己实现的,你什么办法呢?

    3.4K30

    JS魔法堂:浏览器模式和文档模式怎么玩?

    IE89,倘若浏览器模式被设置为Internet Explorer7,那么文档模式的只能设置为7,6,5;    IE11,用户代理字符串设置和文档模式可谓是没有半毛钱关系。...兼容模式——IE6的新发明   由于IE6和IE5.5下DOM树的解析等都有很大差异,导致那些适配IE5.5的老网站无法在IE6上正常显示,于是出现了一个新功能——“兼容模式”,用于解决老网站的显示问题...(IE7也是这样)  注意:这时的兼容模式主要是解决显示问题,要知道那时的JS只是小配角而已。   3.3....DOCTYPE>均没有),是采用怪异模式(Quirks);当时,均采用浏览器版本对应的标准模式(如IE8就采用IE8标准模式,IE11就采用IE11标准模式)。  ...mode仅在IE8/9/10生效,因此在IE11时设置是无效的,只有在开发工具设置才有效果。

    1.9K80

    【python-opencv】图像的基本操作

    对于 BGR 图像,它返回一个由蓝色、绿色和红色值组成的数组。对于灰度图像,只返回相应的灰度。...对于图像的眼睛检测,首先对整个图像进行人脸检测。在获取人脸图像时,我们只选择人脸区域,搜索其中的眼睛,而不是搜索整个图像。...因此,仅在必要时才这样做。否则请进行Numpy索引。 5、为图像设置边框(也就是padding操作) 如果要在图像周围创建边框(如相框),则可以使用cv.copyMakeBorder()。...此函数采用以下参数: src - 输入图像 top,bottom,left,right 边界宽度(以相应方向上的像素数为单位) borderType - 定义要添加哪种边框的标志。...(图像与matplotlib一起显示。因此红色和蓝色通道将互换): ?

    50820

    关于无障碍设计的七件事

    使用颜色突出显示或补充显示那些已经很明显的东西。 在下面的例子,页面以灰度显示,你可以说出有哪些字段是处在错误状态的? ? 大多数人一眼能看出“验证码”字段(最后一行“Code”)处在错误状态。...因为在验证输入框右边一个带惊叹号的三角形icon。这个符号通常表明东西出差错了。 现在,我们再来看看同样的页面。不过这次加上颜色。现在你可以看出有哪些字段处在错误状态吗? ?...当页面有颜色以后,我们可以看到其实四个输入框全部出错了(前面三行都用了红色边框)。这对于视障用户来说,这个页面没有做到“无障碍”。...但是,很多方法可以让这个页面做到视觉无障碍:将红色三角形icon放在所有出错字段的后面;使用文本来提示和解释为什么这个输入框有错误;使用提示框、粗文本、下划线、斜体字体等等。...缺失一:没有边框的表格 下面是传统的文本输入的示例。它是一个具有定义边界的矩形。表单输入区域可以填充颜色(当然不一定要填充)。还有一个可见标签,在这个例子里位于字段的左侧。 ?

    3K30

    值得收藏!基于激光雷达数据的深度学习目标检测方法大合集(上)

    红色表示更高的置信。(c)对应于预测为正的所有点的边框候选,即(b)的高置信度点。(d)非最大抑制后的剩余边框。红点是车辆的基本点供参考。 ?...然而,这会使数据不必要地大量增加并导致问题。 本文设计了一种神经网络,它直接消费点云数据,并且很好地尊重输入的点置换不变性。...边框作为车辆假设(在HG步)拟合成分割目标。 边框用作ConvNet的输入,分类/验证为“车辆”类的假设(在HV步)。 如下是DepthCN的算法流程图: ? 如图是一些结果示意图。...顶部:检测到的地面点用绿色表示,在摄像机视野之外的LIDAR点以红色显示。底部:以2D边框的形式表示的投影的聚类和HG。右边:缩放视图,垂直橙色箭头表示相应的障碍物。 ?...下图显示了原始输入点云、深度探测器输出、最终跟踪的车辆以及提交用于评估的RGB投影边框。 ?

    2.6K31

    上下div高度动态自适应--另类处理方案

    这段时间在工作遇到一个看似较为棘手的问题问题描述:查询报表页面分为上下两部分,上部分为条件输入区域,下部分为报表展示区域。...客户要求做到默认满屏(但要动态适应不同的窗体大小,也就是浏览器窗体用户会手动改变其大小),但上部分条件输入区域动态变化高度的现象。     ...在遇到上述问题,您是否第一反应就是利用window的onresize事件,做尺寸的动态调整。但是条件输入区域某个按钮动态改变了上部分的高度时,我们又应该如何呢。是否统一的处理方案呢。...$object); }      在此处,为了做到兼容IE11(因为Ie11不支持attacheEvent方法,所以也会被判断为现代浏览器),本人创建的DOM,不是使用的object而是使用的...iframe,因为在IE下object的onload事件不能触发,而iframe的可能有;并且iframe的边框一定要去掉,否则影响判断。

    3.1K50

    Java学习笔记-全栈-web开发-01-HTML基础总览

    常用属性: text:用于设定文字颜色 background:用于设定背景图片 bgcolor:用于设定背景色 2.1.5 颜色取值 颜色由红色、绿色、蓝色混合而成 三种取取值方式:...根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。...该字段的字符被掩码....常用属性: cols:垂直切割 rows:横向切割 frameborder:定义框架的边框,其值可以0和 1,0表示不要边框,1表示要显示边框。...常用属性: src:定义此框架要显示的页面url name:定义此框架的名称 frameborder:定义框架的边框,其值可以0和 1,0表示不要边框,1表示要显示边框

    2.6K20

    挥别web移动端开发差异和经典坑

    描述: iOS系统JS转换字符串变日期对象的时候,字符串格式必须是/相隔,通常情况是-相隔,在微信小程序IOS环境同样出现出现此问题 iOS系统对js的new Date()方法格式要求 let...,但是在 ios 手机浏览器中用输入输入之后,并未立刻相应 keyup、keydown 事件 非直接的文字输入(中文输入法)下,进行判断限制,仅在选词后触发input事件 描述:在使用oninput监控输入框内容变化时...,我们期望仅在value值变化时,才触发oninput事件,而在中文输入下,未选词时的按键也会触发oninput事件。...关键解决:composition event compositonstart: 在IME的文本复合系统打开时触发,表示要开始输入例如(输入法出现的那一刻) compositionupdate: 在向输入字段插入新字符时触发...如: http://www.xuejiehome.com/#/home,跳转至微信授权后,回调接口再次跳转至该页面原地址时,微信中显示空白。IOS无此问题

    2.9K20

    解决前端项目在IE11下不能正常显示且自定义http字段报错异常

    昨天接到客户的反馈,说用户的IE11浏览器无法访问我们的后台 据了解,IE11只能在win7系统上运行,我们的电脑都是win10的不能远行,后来发现360兼容模式可以模拟IE11,并复现问题....于是用360兼容模式打开网站.页面出现白屏, 打开控制台显示JavaScript 语法错误,并且还有一个无法获取未定义会null引用的熟悉call 如下图 点击对应的js 进入堆栈查看 是哪个方法出错...这个就是要考验一下 想象力和联想力了 最终经过查询 发现是 使用了这个包导致的 vue-keep-ratio 这个包里面使用了箭头函数,这是一个未经转义的es6的库, 根据现有的情况两种解决办法,...这个问题解决好了之后,又报了另一个问题 在IE如果你在请求头部添加了一些自定义字段,是需要服务器相关配置的.其他浏览器不需要....redirectedfrom=MSDN 于是我让后台 配置了一下允许自定义的http字段 关键代码如下 // 响应头设置 header('Access-Control-Allow-Headers:x-requested-with

    1K10

    【图解】Web前端实现类似Excel的电子表格

    SpreadJS具有以下功能特点: 丰富的数据交互和外观 数据、显示、可视化和分析支持 强大的计算引擎 工作表和单元格级别的数据绑定 数据验证 单元格类型 数据操作 高速、低耗 谁适合阅读本文?...这个简单的电子表格,此时已经神奇的拥有基本功能,可以输入数字或字母,并可以在单元格输入公式。 ? 通过JavaScript对象的参数设置到Workbook方法的参数,可以自定义初始显示。...下表列出一些常用的边框设置 边框名称 备注 thin 细实线 medium 实线 thick 粗实线 dashed 虚线 dotted 点线 dashDot 点虚线 在Excel合并单元格的要求...如下的例子显示了平均值(AVERAGE函数)和总计(SUM函数)。可以在单元格设置公式的方法显示结果。...导入选项 选项的内容 16 导入公式 2 包含列标题 1 标题行 0 无(默认) 8 格式化的数据 总结 在这篇文章,通过代码实例和图解的方式,使用SpreadJS JavaScript组件来实现电子表格

    8.3K90

    Katalon Studio元素抓取功能Spy Web介绍

    同时,内置的验证和Highlight显示功能可以进一步验证元素定位的准确性。用户使用Web Object Spy可以随心所欲的抓取应用程序界面的任何元素及其属性,并且保存到元素对象库。...打开浏览器跳转链接到你输入的网址,然后将鼠标光标悬停在要捕获的Web对象上。Web对象将以红色边框突出显示。一个覆盖面板也将在屏幕的边缘显示,以显示元素相关的XPath信息。 ?...该对象将以绿色边框突出显示。 ? Highlight验证是否能够定位到元素 ? 点击Save,左侧选择需要保存的元素,右侧选择需要存储的路径点击OK进行保存。...1.在活动的浏览器打开Spy Web,右键单击目标Web元素。选择检查: ? 元素检查器窗口将显示在右侧,带有突出显示的行,指示HTML DOM目标元素的位置。...右键单击高亮显示的行>选择“ 复制” >“选择复制XPath”或“ 复制选择器” ? 导航回Object Spy窗口并粘贴到Xpath Selector Editor; ?

    2.2K10

    最新iOS设计规范三|3大界面要素:栏(Bars)

    在iOS 13及更高版本,可以通过删除导航栏的阴影来隐藏导航栏的底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航栏效果很好,因为它增强了标题和内容之间的联系感。...以此来避免按钮文本同时显示造成按钮无法区分的问题。 考虑在导航栏中使用分段控件,使APP的层次结构更加扁平。如果在导航栏中使用分段控件,务必仅在层次结构的顶层使用。...例如,Safari会在您点击搜索字段后立即显示您的书签。选择一个即可直接进入,而无需输入任何搜索词。当您在搜索字段中键入时,“股票”会显示结果列表。随时点按一个,而无需再输入任何字符。...选项卡太少也可能是一个问题,因为它会使您的界面显得断开。尽管“更多”选项卡可以显示更多的选项卡,但它需要额外的点击才能显示出来,并且可能会浪费空间。...可以在标签上做标记 - 包含白色文本的红色椭圆(即小红点),或者一个数字或一个感叹号,用以提示用户新信息,并且新信息与该视图或模式是相关联的。 确保标签栏标志符号在视觉上保持一致和平衡。

    9.9K10
    领券