angular2+onsenui--监听input框输入，input的值不为空时，提交按钮激活

最新推荐文章于 2024-02-19 20:30:00 发布

原创最新推荐文章于 2024-02-19 20:30:00 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular2

angular2+onsenui框架专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在Angular2项目中结合OnsenUI，实现当Input输入框的值不为空时，自动激活提交按钮的功能。通过HTML、TypeScript和CSS的配合，确保表单验证和交互体验。

在这里插入图片描述
XXX.html

<div class="content">
	<div class="r-input clearfix">
		<input type="text" id="name" [(ngModel)]="name"  maxlength="13"  placeholder="请输入新手机号" (keypress)='onPhonepress($event)' />
	</div>
	<div class="r-input r-input2 clearfix">
		<input type="text" id="code" [(ngModel)]="code"  placeholder="请输入验证码" />
		<ons-button  [ngClass]="{'active':name!==''}" [disabled]="name==''">获取验证码</ons-button>
	</div>
	<p class="r-attach">修改成功后需使用新手机号码登录</p>
	<div class="r-btn" >
		<ons-button [ngClass]="{'active':code!==''}" [disabled]="code==''">完成</ons-button>
	</div>
</div>

xxx.ts

export class EditPhoneNum {
	public name: string = ''; //用户名      //注意，初始化时要定义为‘’值
	public code: any=''; //验证码

 
  onPhonepress(event) {
// 判断是否为数字
    let inputStr = String.fromCharCode(event.keyCode);
    let re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字
    if (!re.test(inputStr)) {
      return false;
    }
  }  
  
}

xxx.css

.clearfix {
  content: '';
  clear: both;
  display: block;
  overflow: hidden;
}

.clearfix:after {
  content: '';
  clear: both;
  display: block;
  overflow: auto;
  zoom: 1;
}
.r-input{
	background-color: #fff;
	padding: 12px;
	border-top: 1px solid #f2f2f2;
}

.r-input:first-child{
	margin-top: 10px;
	border-top: none;
}

.r-input input{
	font-size: 16px;
	width: 60%;
	float: left;
}

.r-attach{
	padding: 10px;
	color: #4a90e2;
	font-size: 14px;
}

.r-input.r-input2{
	padding: 8px 12px;
}

input#code {
	margin-top: 3px;
}

.r-input ons-button{
	width: 30%;
	text-align: center;
	float: right;
	color: #fff;
	font-size: 14px;
	margin-right: 10px;
	background-color: #b1b1b1;
	padding: 1px 0;
}

.r-input ons-button.active{
	background-color: #ffaf2c;
}


.r-btn{
	margin: 80% auto 0;
	width: 80%;
}

.r-btn ons-button{
	width: 100%;
	background-color: #b1b1b1;
	color: #fff;
	font-size: 15px;
	text-align: center;
	padding: 5px 0;
	border-radius: 5px;
}

.r-btn ons-button.active{
	background-color: #ffaf2c;
}