Nhảy tới nội dung

input

input, tên đầy đủ là input box, cho phép người dùng nhập thông tin dạng text.

Quét mã để trải nghiệm​

Xem code mẫu trên Tini Studio

Demo​

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính​

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
typestringQuy định định dạng dữ liệu (format) được nhập vào input. Nhận các giá trị =[text || email || number || decimal || tel || search ||url ].
Lưu ý: một số type sẽ không có hiệu lực trên Simulator của Studio mà bạn phải chạy trên thiết bị thật.
passwordbooleanfalseChỉ định input dùng để nhập mật khẩu. Mỗi ký tự người dùng nhập vào sẽ được đại diện bằng chấm tròn (•)
namestringKhai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form
valuestring''Giá trị khởi tạo.
placeholderstringNội dung hiển thị trước khi người dùng nhập giá trị của input
placeholder-classstringCSS class cho placeholder
placeholder-stylecss styleInline style cho placeholder
disabledbooleanfalseVô hiệu hoá input
maxlengthnumber140Giới hạn số ký tự được nhập.
focusbooleanfalseTự động focus vào input
confirm-typestringdoneQuy định nhãn hiển thị (title) cho phím return (Nhập) trên bàn phím ảo. Nhận các giá trị = [ enter || done || go || next || previous || search || send ]
selection-startnumberVị trí bắt đầu khi select nội dung trong input. Chỉ có hiệu lực trong input đang được focus true
selection-endnumberVị trí kết thúc khi select con trỏ trong input. Chỉ có hiệu lực khi focus="true" và cần được sử dụng chung với selection-start
cursornumberVị trí bắt đầu của con trỏ khi đang được focus.
controlledbooleanfalseNếu giá trị là true, nội dung value của input sẽ được điều khiển hoàn toàn thông qua hàm setData trong file js
onInputeventSự kiện sẽ được kích hoạt khi nội dung của input bị thay đổi, event.detail = { value: value }
onConfirmeventSự kiện sẽ được kích hoạt khi nhấn nút submit (return/Nhập) , event.detail = { value: value }
onFocuseventSự kiện sẽ được kích hoạt khi input được focus , event.detail = { value: value }
onBlureventSự kiện sẽ được kích hoạt khi input không được focus nữa , event.detail = { value: value }

Sample Code​

index.txml
<view class="container">
  <view class="block">
    <text class="header">Events</text>
    <view class="item">
      <text>Events</text>
      <input
        onInput="onInput"
        onFocus="onFocus"
        onConfirm="onConfirm"
        onBlur="onBlur"
      />
    </view>
  </view>

  <view class="block">
    <text class="header">Input type</text>
    <block tiki:for="{{inputTypes}}">
      <view class="item">
        <text>{{ item }}</text>
        <input placeholder="{{item}}" type="{{item}}" />
      </view>
    </block>
  </view>

  <view class="block">
    <text class="header">Confirm type</text>
    <block tiki:for="{{confirmTypes}}">
      <view class="item">
        <text>{{ item }}</text>
        <input placeholder="{{item}}" confirm-type="{{item}}" />
      </view>
    </block>
  </view>

  <view class="block">
    <text class="header">Disabled</text>
    <view class="item">
      <text>Disabled</text>
      <input placeholder="disabled" disabled="true" />
    </view>
  </view>
</view>
index.js
Page({
  data: {
    inputTypes: [
      'none',
      'text',
      'tel',
      'url',
      'email',
      'numeric',
      'decimal',
      'search'
    ],
    confirmTypes: [
      'enter',
      'done',
      'go',
      'next',
      'previous',
      'search',
      'send'
    ]
  },
  onInput(e) {
    console.log('onInput', e);
  },
  onConfirm(e) {
    console.log('onConfirm', e);
  },
  onFocus(e) {
    console.log('onFocus', e);
  },
  onBlur(e) {
    console.log('onBlur', e);
  }
});
index.tcss
.container {
  min-height: 100%;
  background-color: var(--gray20);
  padding: 16px;
}

.block {
  background-color: white;
  margin: 8px 0;
  padding: 16px;
  border-radius: var(--border-radius-rounded-4px);
}

.item {
  margin: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
}

.item input {
  margin-left: 16px;
}