Javascript 单击“角度”可减小表单字段大小_Javascript_Css_Angularjs

Javascript 单击“角度”可减小表单字段大小

javascript css angularjs

Javascript 单击“角度”可减小表单字段大小,javascript,css,angularjs,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:

我对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>

非常感谢您的帮助

谢谢

更新：

这是我的输入文本框，我希望用户名在这里缩小，并在单击时位于文本框的左上方

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

您可以使用ng类，而不是ng hide和ng show。基于最后一次单击，您可以设置一个控制器变量（在下面的示例中为“selected”），并在html文件中设置具有关联样式的类，如下所示

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

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

只需使用CSS

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

简单地使用CSS

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

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

ng-click="inputClickFunction()" and ng-blur="inputBlurFunction()"

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

ng-click="inputClickFunction()" and ng-blur="inputBlurFunction()"

没有任何代码，我们无法帮助您。通过编辑问题，在问题中发布相关代码。如果没有任何代码，我们将无法帮助您。通过编辑问题，在问题中发布相关代码。