input

Waft容器 1.4+ Waft前端框架 0.7+

示例

<input class="input" onFocus="onFocus" onBlur="onBlur" onInput="onInput" onConfirm="onConfirm"/>

组件演示

axml

<div class="warpper">
  <x-nav-bar showArrow="{{true}}" title="input"></x-nav-bar>
  <div class="container">
    <view class="box">
      <view class="view" >用户名</view>
      <input class="input" onFocus="onFocus_name" onBlur="onBlur_name" onInput="onInput_name" onConfirm="onConfirm_name"/>
    </view>
    <view class="box">
      <view class="view" >密码</view>
      <input class="input" onFocus="onFocus_password" onBlur="onBlur_password" onInput="onInput_password" onConfirm="onConfirm_password"/>
    </view>
  <scroller class="content">
    <view class="list">
       <view>onFocus</view>
        <view class="list_text">
          <view class="list_name">用户名:</view>
          <view>{{onFocus_name_detail.value}}</view>
        </view>
        <view class="list_text">
          <view class="list_name">密码:</view>
          <view>{{onFocus_password_detail.value}}</view>
        </view>      
    </view>
    <view class="list">
       <view>onBlur</view>
        <view class="list_text">
          <view class="list_name">用户名:</view>
          <view>{{onBlur_name_detail.value}}</view>
        </view>
        <view class="list_text">
          <view class="list_name">密码:</view>
          <view>{{onBlur_password_detail.value}}</view>
        </view>      
    </view>
    <view class="list">
       <view>onInput</view>
        <view class="list_text">
          <view class="list_name">用户名:</view>
          <view>{{onInput_name_detail.value}}</view>
        </view>
        <view class="list_text">
          <view class="list_name">密码:</view>
          <view>{{onInput_password_detail.value}}</view>
        </view>      
    </view>
    <view class="list">
       <view>onConfirm</view>
        <view class="list_text">
          <view class="list_name">用户名:</view>
          <view>{{onConfirm_name_detail.value}}</view>
        </view>
        <view class="list_text">
          <view class="list_name">密码:</view>
          <view>{{onConfirm_password_detail.value}}</view>
        </view>      
    </view>
    <view class="scroller_foot"></view>
  </scroller>
  </div>
</div>

css

.warpper {
  background-color:white;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container{
  flex: 1;
  color: black;
}

.box{
  width: 80vw;
  padding: 30rpx;
  margin: 20rpx auto;
  border: 1rpx solid #666;
  border-radius: 8rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.view{
  margin-right: 20rpx;
  width: 80rpx;
}
.content{
  height: 200rpx;
}
.input{
  width: 90%;
  height: 100%;
}
.list{
  height: 80rpx;
  margin-bottom: 40rpx;
} 
.list_name{
  width: 80rpx;
}
.list_text{
  margin: 5rpx;
  display: flex;
  flex-direction: row;
}
.scroller_foot{
  height: 40rpx;
}

ts

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, Page, Props, Event, MessageEvent, setTimeout,window, CustomEvent } from "waft";

let _this: Index;
export class Index extends Page {
  constructor(props: Props){
    super(props);
    _this = this;
    this.addEventListener("onFocus_name", (e: Event, target)=>{
      console.log(`onFocus==name===获得焦点时触发===${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onFocus_name_detail": ${detail}}`));
    });
    this.addEventListener("onBlur_name", (e: Event, target)=>{
      console.log(`onBlur==name===失去焦点时触发====${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onBlur_name_detail": ${detail}}`));
    });
    this.addEventListener("onInput_name", (e: Event, target)=>{
      console.log(`onInput==name===改变时触发====${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onInput_name_detail": ${detail}}`));
    });
    this.addEventListener("onConfirm_name", (e: Event, target)=>{
      console.log(`onConfirm==name===输入文字后回车====${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onConfirm_name_detail": ${detail}}`));
    });

    this.addEventListener("onFocus_password", (e: Event, target)=>{
      console.log(`onFocus_password===获得焦点时触发===${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onFocus_password_detail": ${detail}}`));

    });
    this.addEventListener("onBlur_password", (e: Event, target)=>{
      console.log(`onBlur_password===失去焦点时触发====${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onBlur_password_detail": ${detail}}`));
    });
    this.addEventListener("onInput_password", (e: Event, target)=>{
      console.log(`onInput_password===改变时触发====${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onInput_password_detail": ${detail}}`));
    });
    this.addEventListener("onConfirm_password", (e: Event, target)=>{
      console.log(`onConfirm_password==输入文字后回车=====${e.toString()}`);
      const even = e.toJSONObject();
      const detail = even.getObject("detail");
      _this.setState(JSON.parseObject(`{"onConfirm_password_detail": ${detail}}`));
    });
  }
  onShow(): void{
    // 页面显示
    console.log('page onShow');
  }
  onLoad(query: JSONObject): void{
    // 页面加载后
    console.log('page onLoad:' + JSON.stringify(query));
  }
  onMessage(event: MessageEvent): void{
    // 信息推送更新
    console.log('page onMessage:' + JSON.stringify(event.data));
  }
}

事件