javascript - 单击时 Angular 减小表单字段大小

标签 javascript css angularjs

我是 angular js 和 CSS 的新手,并且具有基本的 Java 脚本知识。

我正在尝试在表单字段中设计一个表单页面,假设用户名会在点击时缩小,在点击其他地方时会增加。我尝试了 ng-hide 和 ng-show,我在其中为每个类添加了不同的 css 样式,它使表单字段消失并在单击时出现。

非常感谢任何帮助。

谢谢。

更新:

这是我的输入文本框,我希望用户名在其中缩小并在点击时位于文本框的左上角。

<body>
<input type="text" value="Username" style="width: 100%; height: 50px ; 
 border:0;border-bottom: 1px solid black;" > </body>

最佳答案

简单的使用CSS

input{
  width: 200px;
  //added a smooth transition, need vendor prefixes
  transition: width 0.25s ease-in;
}
input:focus{
 width: 300px;
}

关于javascript - 单击时 Angular 减小表单字段大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36495777/

相关文章:

javascript - SVG 动画 跳跃

angularjs - Firebase 绑定(bind)未反射(reflect)在 Angular View 中

javascript - 如何使用隔离范围提高 Angular Directive(指令)中双向绑定(bind)的性能?

html - 如果列数超过 3,则在 Angular js 中使用 ng-repeat 动态添加一行

javascript - 在react组件中执行js代码

javascript - Laravel 5 - 在 Javascript 中解密 Crypt::encrypt

javascript - Reactjs 组件之间的通信

html - 为 HTML 模板设置列

javascript - 循环浏览多个 body 背景图像

javascript - 一键清除 jquery 中的搜索栏