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

聚焦于bootstrap模式中的输入字段在angular 6中不会发生

在Angular 6中,如果你使用了Bootstrap样式框架,那么输入字段在聚焦时通常不会发生任何变化。这是因为Bootstrap并没有为输入字段的聚焦状态提供特殊的样式。

然而,你可以使用Angular的模板驱动表单或响应式表单来实现输入字段聚焦时的样式变化。下面是两种方法的示例:

  1. 模板驱动表单: 在模板中,使用ngModel指令绑定输入字段的值,并结合ngClass指令来根据字段是否聚焦来添加样式。例如:
代码语言:txt
复制
<input type="text" name="username" [(ngModel)]="username" (focus)="isFocused = true" (blur)="isFocused = false" [ngClass]="{'focused': isFocused}">

在上面的例子中,当输入字段聚焦时,会将isFocused变量设置为true,当失去焦点时,会将isFocused变量设置为false。然后使用ngClass指令根据isFocused变量的值来添加/移除"focused"类,你可以在样式表中定义这个类来实现输入字段聚焦时的样式。

  1. 响应式表单: 在组件的代码中,创建一个FormControl对象,并使用FormGroup来包装它。然后,监听输入字段的聚焦事件,当聚焦时,设置一个布尔类型的变量为true,当失去焦点时,设置为false。最后,在模板中使用formControlName指令绑定输入字段,并使用ngClass指令根据变量的值添加/移除样式。

组件代码示例:

代码语言:txt
复制
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;
  isFocused: boolean = false;

  constructor() {
    this.form = new FormGroup({
      username: new FormControl('')
    });
  }

  onFocus() {
    this.isFocused = true;
  }

  onBlur() {
    this.isFocused = false;
  }
}

模板代码示例:

代码语言:txt
复制
<input type="text" formControlName="username" (focus)="onFocus()" (blur)="onBlur()" [ngClass]="{'focused': isFocused}">

在上面的例子中,通过调用onFocus()和onBlur()方法来设置isFocused变量的值,然后使用ngClass指令根据isFocused变量的值来添加/移除"focused"类。

总结来说,在Angular 6中,如果你使用Bootstrap样式框架,输入字段在聚焦时不会自动发生变化。但你可以通过模板驱动表单或响应式表单来实现输入字段聚焦时的样式变化,具体方式可以参考上面的示例。如果你想了解更多关于Angular 6的表单处理,你可以查阅Angular官方文档:https://angular.io/guide/forms

相关搜索:关闭模式时,bootstrap模式中表单的输入字段不会重置在bootstrap模式中显示输入的问题当值在输入字段中时,angular material optionSelected不会触发如何在React中自动聚焦于特定的输入字段(在单击另一个元素之后)?主表中的数据不会填充模式表单的输入日期字段Angular 2- ng-bootstrap -如何在输入字段中按Enter键时防止模式关闭Bootstrap的模式在Angular应用程序中没有弹出吗?如何在angular 7中打开bootstrap模式表单,并在表单的输入框中输入按钮名称在Bootstrap 4的输入字段中以内联方式显示标签在Bootstrap 4.5.3中输入要填充只读字段的选定项的组bootstrap4输入文件上载不会在输入中显示已上载的文件名??如何使用angular解算如果bootstrap4模式位于页面的下方,当点击模式中的输入字段时,它会滚动到底部(chrome android)无法使用jspdf在angular中打印包含pdf转换中输入字段的Html表格在GridLayout中包含组的NativeScript Angular RadDataForm不会扩展以显示iOS上的字段如何使一个在angular中已经存在默认值的输入字段成为必填字段?自动将文本输入到在angular中定义了可编辑字段的字段中,我的测试框架是selenium webdriverio在IE11的angular2中单击以选择输入文本字段中的文本在JSX/React中从Flux设计模式中的输入文本字段获取字符串在angular 5中按下浏览器的后退按钮时,我的模式弹出窗口不会关闭在Bootstrap3中,模式弹出窗口不会出现在覆盖图的顶部。如何解决此问题
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ng-Matero v15 正式发布

但是 datetimepicker 时间选择模块并没有完全遵循 Material 规范(缺少时间输入模式),这也影响了很多需求实现。...侧边栏导航焦点管理 侧边栏导航聚焦功能是 14.3.0 添加,可能很多人没有注意到这个不显眼功能(使用 TAB 键即可快速切换焦点,按 space 或者 enter 键可以展开收起二级菜单...另外,侧边栏菜单按钮使用语义化标签进行了优化,关于按钮选择可以参考 Angular Material Button 文档说明: Angular Material 使用原生 ...直接使用 ng update 升级的话,所有引用组件都会自动改为 legacy 组件,所以并不会出现 break changes,但是 legacy 组件都被标记为 deprecated(会显示划线...停止更新 Angular Flex-Layout 万万没想到 Angular Flex-Layout 竟然不再更新到 v15,虽然早就知道一直处于 beta 版本 Flex-Layout 会在某个版本发生重大变化

5.5K40
  • Angular 从入坑到挖坑 - 模块简介

    、HttpClientModule 这种 Angular 内置库也都是一个个 NgModule,开发通过将组件、指令、管道、服务或其它代码文件聚合成一个内聚功能块,专注系统某个功能模块...,例如在上节笔记创建 CrisisModule,定义了我们该特性模块创建组件,以及需要使用到其它模块 ?...,因此,可以通过添加到 providers 数组,提供给别的模块使用 bootstrap Angular 应用通过引导根模块来启动,因为会涉及到构建组件树,形成实际 DOM,因此需要在 bootstrap...数组添加根组件用来作为组件树根 3.3、特性模块 特性模块是用来将特定功能或具有相关特性代码从其它代码中分离出来,聚焦特定应用需求。...对于带有很多路由大型应用,考虑使用惰性加载模式

    1.8K20

    Angular、React 和 Vue 三大框架,Web 开发该如何选择?

    性 能 Web 项目中,性能与 DOM 密切相关:DOM 浏览器 / 代码中表示 Web 页面。发生更新时,你可以通过 DOM 控制 Web 页面。...谷歌搜索:谷歌搜索,React 查询请求最多,紧随其后是 Vue.js。目前最不受欢迎Angular.js。Angular.js 的人气在下降,而 Vue.js 的人气却在上升。...Angular 应用程序基于 MVC 设计模式构建,这个模型致力创建具有以下特征应用程序: 易于扩展:如果你理解了基础知识,即使是最复杂 Angular 应用,你也很容易就能够理解,这意味着你可以很轻松地扩展应用来提供实用新功能...Vue.js VS React:双向数据绑定 Vue ,你可以轻松地将组件变量绑定到表单字段。当你更改变量时,表单字段会更新,当用户更改表单字段时,组件变量也会更新。...例如,对于 Web 应用程序,我发现,使用 Angular 比使用 ReactJS 更方便。 你可以自己尝试并比较不同方向或技术。为此,你可以谷歌趋势输入一些关键字,它会为你画出漂亮图表。

    1.7K30

    AngularDart4.0 指南- 表单 顶

    模板驱动形式 您可以通过使用本页描述特定于表单指令和技术Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...这个表格三个字段两个是必需。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意风格显示验证错误: ?...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定到父组件。 这不是现在问题,这些未来变化不会影响表单。...您将展示两个Hero字段,name和alterEgo,并在输入框中将其打开以供用户输入。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强)表单元素上定义一个模板引用变量。 多处按钮引用该变量。

    17.5K30

    Angular 2 表单(上)

    利用 Angular 模板,我们可以创建各种类型表单,例如:登录表单,联系人表单,商品详情表单等,而且我们也为这些表单字段添加数据校验。 接下来我们一步步来实现表单功能。...解压后,修改目录名为angular-forms,修改 angular-forms/package.json 文件 "name": "angular-quickstart" 为 "name": "angular-forms...创建 Site 模型 以下创建了一个简单模型类 Site,包含了三个必需字段:id,name,url,一个可选字段:alexa。...: number ) { } } 以下代码,标为 public 为公有字段,alexa 后添加一个问号(?)表示可选字段。... angular-forms 目录下输入以下命令: cnpm install bootstrap --save 打开 index.html 文件,把以下样式链接添加到 : <link

    1.5K10

    前端流行框架那么多,该如何选择?

    通常,库是一个封装好拥有特定函数和方法集合。面向对象代码组织形式集合,叫类库;面向过程代码组织形式集合,叫函数库。程序员只需在库查询需要功能,并引用到自己模块来使用。...它最初由Brat Tech LLCMisko Hevery2009年开发出来。Angular JS是一个模型-视图-控制器(MVC)模式框架,目的在于使HTML动态化。...值得一提是,Vue创始人是一位大陆赴美留学生,尤雨溪,学习艺术设计,本科毕业Colgate University,后Parsons设计学院获得Design & Technology艺术硕士学位。...所有的Vue模板都是基于HTML,你可以GitHub上找到很多资源。它也提供双向绑定和服务端渲染。Vue,你可以使用模板语法或使用JSX直接编写渲染函数。...Vue.js自身不是一个全能框架,它只聚焦视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。 技术特性 易用:已经会了HTML,CSS,JavaScript?即刻阅读指南开始构建应用。

    88020

    如何在Ubuntu 14.04上使用Bower管理前端JavaScript和CSS依赖项

    接下来步骤,我们将会 制作一个新Bower项目 用Bower安装Bootstrap 用Bower安装AngularJS 通过Nginx服务网站 本教程结束时,Bower Reference部分...我们快速示例,我们将使用默认站点。 但是,对于生产应用程序,您应该为特定域设置服务器块。...Yes 关于这些选项一些注意事项: 只需重新访问之前注释,在运行此示例项目的bower init命令时,无需输入任何选项 What types of modules does this package...(这基本上是来自Bootstrap登录模板示例,其中标签内内容具有带两个输入字段简单表单。)...安装软件包 要安装包(例如,AngularJS或Bootstrap),我们需要运行以下命令: bower install package 不是package,我们要输入是安装软件包的确切名称。

    2.8K00

    AngularDart4.0 指南- 依赖注入 顶

    你当然不希望测试过程中发生这种情况。 如果汽车轮胎压力低时候应该发出警告信号呢? 如果您在测试过程无法换上低压轮胎,您如何确认它实际上会闪烁警告? 你无法控制汽车隐藏依赖。...在这个示例应用程序,HeroComponent是应用程序启动时创建,并且永远不会销毁,因此为HeroComponent创建HeroService也依赖于应用程序生命周期而存在。... getHeroes() => mockHeroes; } 构造函数要求注入Logger实例,并将其存储一个名为logger专用字段。...: AppComponent(@Inject(appConfigToken) Map config) : title = config['title']; 虽然Map接口依赖注入不起作用,但它支持输入配置对象...在这个例子Angular将组件注入器注入到组件构造函数。 该组件然后ngOnInit()向注入注入器询问它想要服务。 请注意,服务本身不会被注入到组件

    5.7K20

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    ,然后清除输入字段,以便为其他名称做好准备。...当用户搜索框输入一个名字时,你会对这个名字过滤英雄进行重复HTTP请求。 首先创建HeroSearchService,将搜索查询发送到服务器Web API。..._http.get()调用类似HeroService调用,尽管URL现在有一个查询字符串。...示例,基础字符串流(_searchTerms.stream)表示由用户输入英雄名称搜索模式。 每次调用search()都会通过调用控制器上add()将新字符串放入流。...仪表板搜索框输入一些文字。 如果你输入字符匹配任何现有的英雄名字,你会看到这样东西。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)示例源代码。 确认您具有以下结构: ?

    11K30

    【AngularJS】 # AngularJS入门

    $scope.name = "John Doe"; }); 双向绑定,修改输入值时, AngularJS 属性值也将修改 <div ng-app="myApp" ng-controller...Scope作用范围 根作用域:$rootScope 作用在 ng-app 指令包含所有HTML元素 用 $rootScope 定义值,可以各个controller中使用 <div ng-app=...AngularJS 服务(service) AngularJS ,服务是一个函数或对象,可在 AngularJS 应用中使用。 7.1....$dirty 表单有填写记录 $valid 字段内容合法 $invalid 字段内容是非法 $pristine 表单没有填写记录 基本表单验证实例,novalidate 用于禁用浏览器默认验证...AngularJS 依赖注入 依赖注入(DI):是一种软件设计模式,在这种模式下,一个或更多依赖(或服务)被注入(或者通过引用传递)到一个独立对象(或客户端),然后成为了该客户端状态一部分。

    23.2K60

    AngularJS2.0 教程系列(一)

    开发模式方面,Web组件也将很快实现。然而现有的框架,包括Angular1.x对WEB组件支持都不够好。 移动化 想想5年前......现在计算模式已经发生了显著地变化,到处都是手机和平板。...Angular团队希望Angular2将复杂性 封装地更好一些,让暴露出来概念和开发接口更简单。 ?...,可能隐约会感受到Angular2bootstrap一些 变化 - 我指并非代码形式上变化。...以组件为核心 Angular1.xbootstrap是围绕DOM元素展开,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立DOM之上。...而在Angular2bootstrap是围绕组件开始,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2!

    2.4K10

    Angular 快速学习笔记(1) -- 官方示例要点

    组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务时,Angular...把它标记为一个 HeroService 注入点 ngOnInit 调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....Angular 最佳实践之一就是一个独立顶级模块中加载和配置路由器,它专注路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串

    3.7K50

    Angular 快速学习笔记(1) -- 官方示例要点

    组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。 它们应该聚焦展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务时,Angular...把它标记为一个 HeroService 注入点 ngOnInit 调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....Angular 最佳实践之一就是一个独立顶级模块中加载和配置路由器,它专注路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串

    3.6K00

    Angular 从入坑到挖坑 - 表单控件概览

    四、Step by Step 4.1、表单简介 用来处理用户输入,通过从视图中捕获用户输入事件、验证用户输入是否满足条件,从而创建出表单模型修改组件数据模型,达到获取用户输入数据功能 模板驱动表单...将数据值和一些对于用户行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件模板,从而完成与用户交互 4.2.1、模板驱动表单双向数据绑定 根模块引入 FormsModule...4.2.3、数据有效性验证 某些时候需要对于用户输入信息做有效性验证,此时可以控件上添加上原生 HTML 表单验证器来设定验证条件,当表单控件数据发生变化时,angular 会通过指令方式对数据进行验证...,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...ngOnInit(): void { } } 针对多个字段进行交叉验证时,模板页面,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

    18.9K20

    Angular进阶教程2-

    组件\color{#0abb3c}{组件}组件不应该直接获取或保存数据,它们应该聚焦展示数据,而把数据访问和处理职责委托给某个服务\color{#0abb3c}{服务}服务。...依赖注入(DI) 依赖项( 服务/对象 )注入是一种设计模式,在这种设计模式,类会从外部源请求依赖项\color{#0abb3c}{请求依赖项}请求依赖项而不是创建它们。...如果你组件\color{#0abb3c}{组件}组件元数据\color{#0abb3c}{元数据}元数据上定义了providers,那么angular会根据providers为这个组件创建一个注入器...SubjectAngular常见作用: 可以Angular通过service来实现不同组件,或者不同模块之间传值 // 定义公共用于数据存储service,文件名是(eg:xampleStore.service.ts...operators本质是,描述从一个数据流到另一个数据流之间关系,也就是observer到observable中间发生转换,很类似Lodash。

    4.1K30

    前端架构101:MVC不足与Flux崛起

    但 MVC 依然存在几个问题 不可预测:当一个事件发生之后,你并不知道会有谁响应这个事件,是单个对象还是多个对象会响应这个事件 级联修改:当一个事件发生之后,A 组件接收到事件之后响应过程,还可能发出其他事件触发后续修改...实现例子,无论是 view 文件还是 controller 文件,其它们职责并不明确,他们同时负责好几件事情: 管理 view model,例如负责保存和清空用户输入值 协调用户流程,例如首先将用户输入值清空...站在工程师角度上看项目代码可维护性并不取决你使用框架多么先进,而是取决使用框架的人和内部工程师文化 扯远了,说回 Flux。在这里我不会再聊 Flux 那些基本入门概念。...注意 store 层工作是不会引起任何副作用 store 完成上一个 action 工作之前,不会有其他 action 再次经过 dispatch 达到 store。...到了 store 中新增字段这一个环节,无论是你是使用 Redux 还是 Mobx 相信你都能迅速找到对应 model / reducer 在哪。

    1.4K20

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    现在我们已经看到了我们自动生成Angular应用程序所有部分,这些部分实际发生在浏览器显示页面。...或者,您可能已经在所有那些华丽AngularJS演示中看到了它,您可以在其中输入输入值并为我们更新页面内容。 这里有一个有趣小技巧:Angular,双向数据绑定已经不再适合我们了。...值发生变化时,它都会传递给我们组件输入。...每次用户向我们输入和浏览器输出输入数据时input $event,我们都会将其分配newCard.text给输入值。 我们实现它之前还有一件事:这个输入看起来有点多,不是吗?...500), takeWhile(() => this.alive) ).subscribe(data => { console.log(data); }); 打开浏览器和开发者工具控制台,并观察我们输入输入新值时会发生什么

    42.6K10
    领券