本文将介绍利用Angularjs和原生JS分别实现动态效果的输入框的详细情况，特别是关于angularjsinput的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时
本文将介绍利用Angularjs和原生JS分别实现动态效果的输入框的详细情况，特别是关于angularjs input的相关信息。我们将通过案例分析、数据研究等多种方式，帮助您更全面地了解这个主题，同时也将涉及一些关于angularjs – Angular js输入框输入和暂停、angularjs – Angular JS：动态载入CSS和JS文件、angularjs – Angular JS：输入框失去了对按键的关注、angularjs – 使用Angular在输入提交按钮上动态设置文本的知识。
本文目录一览：- 利用Angularjs和原生JS分别实现动态效果的输入框（angularjs input）
- angularjs – Angular js输入框输入和暂停
- angularjs – Angular JS：动态载入CSS和JS文件
- angularjs – Angular JS：输入框失去了对按键的关注
- angularjs – 使用Angular在输入提交按钮上动态设置文本
利用Angularjs和原生JS分别实现动态效果的输入框（angularjs input）
在刚开始没有给输入框添加焦点之前，没有任何效果。见下图：
然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二：
中间的输入登录密码文字，会自动添加到顶部（原谅我没有截取到动画过程的图片）。
我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。
下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。
原生JS实现示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.demo{
border: 1px solid gray;
width: 300px;
height: 200px;
position: relative;
left: 200px;
top: 200px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.demo input{
width: 200px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.demo label{
position: absolute;
top: 100px;
left:80px;
font-size: 14px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.activeDemo{
border: 1px #fd715a solid;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.activeInput{
border: 1px #fd715a solid;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.activeLabel{
font-size: 10px;
color: #fd715a;
background: white;
-webkit-transform: translate(-20px, -58px);
-moz-transform: translate(-20px, -58px);
-ms-transform: translate(-20px, -58px);
-o-transform: translate(-20px, -58px);
transform: translate(-20px, -58px);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3 linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
</style>
</head>
<body>
<div>
<input type="text" id="inputDemo"/>
<label for="inputDemo">请输入内容</label>
</div>
</body>
<script>
var addEvent= function (obj,event,callback) {
if(obj.addEventListener){
obj.addEventListener(event,callback)
}else if(obj.attachEvent){
obj.attachEvent(''on''+event,callback)
}
};
var demo=document.querySelector(".demo");
var input=document.querySelector("#inputDemo");
var label=document.querySelector(".demo label");
addEvent(input,"focus", function () {
demo.className+=" activeDemo";
this.className+=" activeInput";
label.className+=" activeLabel";
});
addEvent(input,''blur'', function () {
this.className=this.className.replace(/\s*activeInput\s*/,'' '');
label.className=label.className.replace(/\s*activeLabel\s*/,'' '');
demo.className=demo.className.replace(/\s*activeDemo\s*/,'' '');
})
</script>
</html>
下面是用Angular实现的一个简单的效果，原理很简单，就是在指令中通操作DOM来实现动画。
Angularjs实现示例：
<!DOCTYPE html>
<html lang="en" ng-app="formAnimation">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-animate.js" type="text/javascript"></script>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 445px;
height: 370px;
border-left: 10px solid #d4d4d4;
position: relative;
left: 100px;
top: 100px;
}
.container input{
position: absolute;
top: 100px;
left: 25px;
height: 40px;
width: 385px;
}
.container span{
width: 80px;
height: 25px;
font-size: 10px;
background: rgb(237,97,83);
color: white;
position: absolute;
left: 300px;
top: 109px;
line-height: 25px;
text-align: center;
}
.container .labelStyle{
position: absolute;
left: 45px;
top: 115px;
font-size: 14px;
color: #929292;
z-index: 999;
font: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.inputActive{
border: 2px solid rgb(237,97,90);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.labelActive{
position: absolute;
left: 45px;
top: 115px;
z-index: 999;
background: white;
border: 2px solid white;
color: rgb(237,97,90);
font-size: 10px;
-webkit-transform: translate(-10px, -23px);
-moz-transform: translate(-10px, -23px);
-ms-transform: translate(-10px, -23px);
-o-transform: translate(-10px, -23px);
transform: translate(-10px, -23px);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
</style>
</head>
<body ng-controller="formAnimationController">
<form action=""form-animation>
<label for="inputDemo">请输入内容</label>
<input type="text" id="inputDemo" />
<span>请填写内容</span>
</form>
</body>
<script>
angular.module(''formAnimation'',[])
.controller(''formAnimationController'', function () {
})
.directive(''formAnimation'',[''$animate'', function ($animate) {
return {
restrict:''EA'',
link: function (scope, element, attr) {
element.find("input").on(''focus'', function () {
element.find("input").addClass("inputActive");
element.find("label").removeClass("labelStyle").addClass("labelActive")
});
element.find("input").on(''blur'', function () {
element.find("input").removeClass("inputActive");
element.find("label").removeClass("labelActive").addClass("labelStyle");
})
}
}
}])
</script>
</html>
总结
上面的两种方式只是体现了一下实现的方式，具体的实现样式大家可以可以参照效果图，调节CSS样式。希望这篇文章的内容对大家学习Angularjs和JS能有所帮助，如果有问题可以留言交流，谢谢大家对的支持。
您可能感兴趣的文章:
- 详解AngularJS 模态对话框
- BootStrap+Angularjs+NgDialog实现模式对话框
- 详解angular2封装material2对话框组件
- AngularJS实现页面跳转后自动弹出对话框实例代码
- AngularJs 弹出模态框（model）
- AngularJS $modal弹出框实例代码
- angularjs创建弹出框实现拖动效果
- Angular弹出模态框的两种方式
- AngularJS中使用ngModal模态框实例
- Bootstrap和Angularjs配合自制弹框的实例代码
- Angular2.0实现modal对话框的方法示例
angularjs – Angular js输入框输入和暂停
我是角度js的新手,并且使用带角度js的xmpp服务,我有一种情况,我需要在用户开始输入输入框时发送输入,并在用户停止输入时暂停.
我有基本的想法,我需要使用$timeout,并有一个变量,如vm.isTyping = false;
我也为此写了一些平台.
vm.isTyping = false;
vm.checkTyping = function(){
$timeout(function() {
vm.isTyping = true;
},2000);
if(!vm.isTyping){
vm.sendTyping();
} else{
//
}
};
这是输入字段代码：
<input type="text" placeHolder="Type a message here"
ng-model="vm.newMessage"
ng-blur="focusRemove(vm.newMessage,vm.contact)"
ng-change="vm.checkTyping()"
ng-model-options="{'debounce': 500}"
ng-keydown="vm.onKeyDown($event)" auto-focus />
我面临的问题是,每当用户按任意键时,我都无法发送打字,在第一次按键时发送一个打字然后我应该在用户停止输入时发送暂停.
任何人都可以帮我实现角度js中的代码来实现这一目标.
解决方法
您可以尝试的是输入标记中包含ng-keyup属性.因此,当用户开始输入时,您可以设置标志vm.isTyping = true.当用户在ng-keyup处理程序中停止输入时会超时,这将在一段时间后设置vm.isTyping = false.请参阅以下代码snipet
function myappCtrl($scope,$timeout) {
var timoutPromise = null;
$scope.newMessage = "";
$scope.isTyping = false;
$scope.checkTyping = function() {
$scope.isTyping = true;
if(timoutPromise) {
$timeout.cancel(timoutPromise);
}
}
$scope.stoppedTyping = function() {
timoutPromise = $timeout(function() {
$scope.isTyping = false;
},2000)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="myappCtrl">
<input type="text" placeHolder="Type a message here" ng-model="newMessage" ng-change="checkTyping()" ng-keyup="stoppedTyping()"/>
<div ng-if="isTyping">
typing
</div>
</div>
</div>
angularjs – Angular JS：动态载入CSS和JS文件
我正在开发一个网络应用程序.我使用AngularJS将所有文件动态加载到UI中.
1.我有和index.html,所有文件将在点击或加载时动态加载.
1.我有和index.html,所有文件将在点击或加载时动态加载.
//index.html
<signin button> <signup button> // etc.,//on-clicking signin button a SignIn-page will load in the below div
<div id="bodyview"></div>
// end of index.html
现在我的登录页面看起来有点像下面的结构
/*a div where my accordion menu will load when the
*below submit button is clicked*/
<div id="menu"></div>
//other sign-in-form stuff will follow on...
//submit button at the end
<submit button> //only on clicking the submit button the menu will be loaded
现在我的问题是,虽然我可以加载手风琴menu.html文件,我无法加载它依赖的css和js文件.我已经研究了大多数stackoverflow讨论和很多其他..但没有一个为我工作.
任何人都可以帮助确定使用Angular JS加载css和js依赖关系的方法？
任何帮助不胜感激提前致谢
只需编写一个服务即可将CSS和JS文件添加到< head>
这是一个用于动态加载CSS文件的示例服务.您可以轻松地修改它来加载JS文件.
https://github.com/Yappli/angular-css-injector
angularjs – Angular JS：输入框失去了对按键的关注
我用来填充数据的模拟数据是
"StudentDetails":
[
{
"name": "name1","code":"code1","fields": {
"username": "username1","password": "sample","key": 4513345667878
}
},{
"name": "name2","code":"code2","fields": {
"username": "username2","secretkey": 1213145
}
}
]
我使用以下模板代码填充它
<div ng-repeat="item in StudentDetails"> <div ng-repeat="(key,value) in StudentDetails.fields"> <div></div> <div><input type="text" ng-model="StudentDetails.fields[key]"/></div></div> </div>
字段中的参数会针对每个对象进行更改.
这里的问题是输入框中的单个按键,输入框失去焦点.我不得不反复点击输入框内部以输入数据.
如何在没有框失去焦点的情况下更改输入框中的值.
我使用了“按键跟踪”……并尝试在StackOverflow中发布类似问题的各种答案,但这没有帮助
请帮助这个场景.. !!
问题是,随着模型对象的每次更改,ng-repeat重新生成整个数组,从而模糊输入框.
您需要使用新的ngRepeat语法(在1.1.x中引入)并使用track by $index.
More info in the angular documentation
<div ng-repeat="(i,item) in StudentDetails track by i"> <div ng-repeat="(key,value) in StudentDetails.fields track by key"> <div></div> <div><input type="text" ng-model="StudentDetails.fields[key]"/></div> </div>
angularjs – 使用Angular在输入提交按钮上动态设置文本
<input type="submit" value="Create new order" />
如何根据$scope变量设置’value’属性？
解决方法
http://plnkr.co/edit/DZWzN4D9QzzBCpetSYtF?p=preview
<input type="submit" value="{{model}}" />
在你的控制器中：
$scope.model = "Create new order";
我们今天的关于利用Angularjs和原生JS分别实现动态效果的输入框和angularjs input的分享已经告一段落，感谢您的关注，如果您想了解更多关于angularjs – Angular js输入框输入和暂停、angularjs – Angular JS：动态载入CSS和JS文件、angularjs – Angular JS：输入框失去了对按键的关注、angularjs – 使用Angular在输入提交按钮上动态设置文本的相关信息，请在本站查询。
本文标签：
