首页
学习
活动
专区
工具
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 LLC的Misko Hevery于2009年开发出来。Angular JS是一个模型-视图-控制器(MVC)模式的框架,目的在于使HTML动态化。...值得一提的是,Vue的创始人是一位大陆赴美留学生,尤雨溪,学习艺术设计,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位。...所有的Vue模板都是基于HTML,你可以在GitHub上找到很多资源。它也提供双向绑定和服务端渲染。在Vue中,你可以使用模板语法或使用JSX直接编写渲染函数。...Vue.js自身不是一个全能框架,它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。 技术特性 易用:已经会了HTML,CSS,JavaScript?即刻阅读指南开始构建应用。

    89120

    如何在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中将复杂性 封装地更好一些,让暴露出来的概念和开发接口更简单。 ?...,可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。...以组件为核心 在Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,自举过程是建立在DOM之上的。...而在Angular2中,bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2!

    2.5K10

    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 快速学习笔记(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进阶教程2-

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

    4.2K30

    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

    前端架构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.7K10
    领券