单击时角度减小表单字段大小

angular on click reduce the form field size

本文关键字：表单 字段 单击      更新时间：2024-03-02

我是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;
}

您可以使用ng类来代替ng隐藏和ng显示。根据上次单击，您可以设置一个控制器变量（在下面的示例中为"selected"），并在html文件中设置具有关联样式的类，如下所示。

<input ... ng-class="{selected ? reducedSize : increasedSized}" />

您可以使用两种方法。一个用于ng点击，另一个用于ng模糊做任何你想做的事。

ng-click="inputClickFunction()" and ng-blur="inputBlurFunction()"
相关文章：