uni-app
uni-app x
uniCloud
HBuilder
uni 小程序 sdk
uni-app x
uni-app
uni-app x
uniCloud
HBuilder
uni 小程序 sdk
简体中文
组件
input
input 兼容性
属性
type 兼容性
confirm-type 兼容性
inputmode 兼容性
事件
UniInputEvent
UniInputFocusEvent
UniInputBlurEvent
展示全部

# input

组件类型：UniInputElement

输入框

# input 兼容性

Android iOS web
3.9 4.11 4.0

# 属性

名称 类型 默认值 描述
name string - 表单的控件名称，作为键值对的一部分与表单(form组件)一同提交
disabled boolean false 是否禁用
value string "" 输入框的初始内容
type text | number | digit | tel "text" input的类型
值名称 描述
text 文本输入键盘
number 数字输入键盘
digit 带小数点数字输入键盘
tel 电话输入键盘
password boolean false 是否是密码类型
placeholder string "" 输入框为空时占位符
placeholder-style string "" 指定 placeholder 的样式
placeholder-class string(string.ClassString) "" 指定 placeholder 的样式类，目前仅支持color,font-size和font-weight
maxlength number "不限制长度" 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度
cursor-spacing number 0 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
cursor-color string(string.ColorString) "" 指定光标颜色
auto-focus boolean false 自动获取焦点
focus boolean false 获取焦点
confirm-type send | search | next | go | done "done" 设置键盘右下角按钮的文字
值名称 描述
send 发送
search 搜索
next 下一个
go 前往
done 完成
confirm-hold boolean false 点击键盘右下角按钮时是否保持键盘不收起
cursor number 0 指定focus时的光标位置
selection-start number -1 光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end number -1 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用
adjust-position boolean true 键盘弹起时，是否自动上推页面
hold-keyboard boolean false focus时，点击页面的时候不收起键盘
inputmode none | text | decimal | numeric | tel | search | email | url "text" 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。
值名称 描述
none 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
text 使用用户本地区域设置的标准文本输入键盘。
decimal 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
numeric 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
tel 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。
search 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。
email 为邮件地址输入优化的虚拟键盘，通常包含""符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。
url 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。
@input (event: UniInputEvent) => void - 当键盘输入时，触发input事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
@focus (event: UniInputFocusEvent) => void - 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
@blur (event: UniInputBlurEvent) => void - 输入框失去焦点时触发，event.detail = {value: value}
@keyboardheightchange (event: UniInputKeyboardHeightChangeEvent) => void - 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}
@confirm (event: UniInputConfirmEvent) => void - 点击完成按钮时触发，event.detail = {value: value}

# type 兼容性

Android iOS web
text 3.9 4.11 4.0
number 3.9 4.11 4.0
digit 3.9 4.11 4.0
tel 3.9 4.11 x

# confirm-type 兼容性

Android iOS web
send 3.9 4.11 4.0
search 3.9 4.11 4.0
next 3.9 4.11 4.0
go 3.9 4.11 4.0
done 3.9 4.11 4.0

# inputmode 兼容性

Android iOS web
none x x 4.0
text x x 4.0
decimal x x 4.0
numeric x x 4.0
tel x x 4.0
search x x 4.0
email x x 4.0
url x x 4.0

# 事件

# UniInputEvent

# UniInputEvent 的属性值
名称 类型 必填 默认值 描述
detail UniInputEventDetail 是 - -
名称 类型 必备 默认值 描述
value string 是 - 输入框内容
cursor number 是 - 光标的位置
keyCode number 是 - 输入字符的Unicode值
bubbles boolean 是 - 是否冒泡
cancelable boolean 是 - 是否可以取消
type string 是 - 事件类型
target UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp number 是 - 事件发生时的时间戳
# UniInputEvent 的方法
名称 类型 必填 默认值 描述
stopPropagation () => void 是 - 阻止当前事件的进一步传播
preventDefault () => void 是 - 阻止当前事件的默认行为

# UniInputFocusEvent

# UniInputFocusEvent 的属性值
名称 类型 必填 默认值 描述
detail UniInputFocusEventDetail 是 - -
名称 类型 必备 默认值 描述
height number 是 - 键盘高度
value string 是 - 输入框内容
bubbles boolean 是 - 是否冒泡
cancelable boolean 是 - 是否可以取消
type string 是 - 事件类型
target UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp number 是 - 事件发生时的时间戳
# UniInputFocusEventDetail 兼容性
Android iOS web
height 3.9 4.11 x
# UniInputFocusEvent 的方法
名称 类型 必填 默认值 描述
stopPropagation () => void 是 - 阻止当前事件的进一步传播
preventDefault () => void 是 - 阻止当前事件的默认行为

# UniInputBlurEvent

# UniInputBlurEvent 的属性值
名称 类型 必填 默认值 描述
detail UniInputBlurEventDetail 是 - -
名称 类型 必备 默认值 描述
value string 是 - 输入框内容
cursor number 是 - 选择区域的起始位置
bubbles boolean 是 - 是否冒泡
cancelable boolean 是 - 是否可以取消
type string 是 - 事件类型
target UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp number 是 - 事件发生时的时间戳
# UniInputBlurEvent 的方法
名称 类型 必填 默认值 描述
stopPropagation () => void 是 - 阻止当前事件的进一步传播
preventDefault () => void 是 - 阻止当前事件的默认行为

# UniInputKeyboardHeightChangeEvent

# UniInputKeyboardHeightChangeEvent 的属性值
名称 类型 必填 默认值 描述
detail UniInputKeyboardHeightChangeEventDetail 是 - -
名称 类型 必备 默认值 描述
height number 是 - 键盘高度
duration number 是 - 持续时间
bubbles boolean 是 - 是否冒泡
cancelable boolean 是 - 是否可以取消
type string 是 - 事件类型
target UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp number 是 - 事件发生时的时间戳
# UniInputKeyboardHeightChangeEvent 的方法
名称 类型 必填 默认值 描述
stopPropagation () => void 是 - 阻止当前事件的进一步传播
preventDefault () => void 是 - 阻止当前事件的默认行为

# UniInputConfirmEvent

# UniInputConfirmEvent 的属性值
名称 类型 必填 默认值 描述
detail UniInputConfirmEventDetail 是 - -
名称 类型 必备 默认值 描述
value string 是 - 输入框内容
bubbles boolean 是 - 是否冒泡
cancelable boolean 是 - 是否可以取消
type string 是 - 事件类型
target UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget UniElement | null 否 - UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp number 是 - 事件发生时的时间戳
# UniInputConfirmEvent 的方法
名称 类型 必填 默认值 描述
stopPropagation () => void 是 - 阻止当前事件的进一步传播
preventDefault () => void 是 - 阻止当前事件的默认行为

# input 属性兼容性

Android iOS web
name 3.9 4.11 4.0
disabled 3.9 4.11 4.0
value 3.9 4.11 4.0
type 3.9 4.11 4.0
password 3.9 4.11 4.0
placeholder 3.9 4.11 4.0
placeholder-style 3.9 4.11 4.0
placeholder-class 3.9 4.11 4.0
maxlength 3.9 4.11 4.0
cursor-spacing 3.9 4.11 x
cursor-color 3.99 4.11 4.0
auto-focus 3.9 4.11 4.0
focus 3.9 4.11 4.0
confirm-type 3.9 4.11 4.0
confirm-hold 3.9 4.11 4.0
cursor 3.9 4.11 4.0
selection-start 3.9 4.11 4.0
selection-end 3.9 4.11 4.0
adjust-position 3.9 4.11 x
hold-keyboard 4.0 4.11 x
inputmode x x 4.0
@input 3.9 4.11 4.0
@focus 3.9 4.11 4.0
@blur 3.9 4.11 4.0
@keyboardheightchange 3.9 4.11 x
@confirm 3.9 4.11 4.0

# 子组件

不可以嵌套组件

# 示例

hello uni-app x

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-common-mt uni-padding-wrap">
      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置输入框的初始内容</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-default" class="uni-input" value="hello uni-app x" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">type取值（不同输入法表现可能不一致）</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-tel" class="uni-input" :type="inputTypeTel" placeholder="电话输入键盘" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">密码输入框</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-password" class="uni-input" :password="inputPassword" :value="inputPasswordValue" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">占位符样式</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle"
            placeholder="占位符文字颜色为红色" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass"
            placeholder="占位符字体大小为10px" />
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :placeholder-style="inputPlaceHolderStyle"
            value="不设置placeholder只设置placeholder-style" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置禁用输入框</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-disable" class="uni-input" :disabled="true"/>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置最大输入长度</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10"
            :value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置光标与键盘的距离</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">自动获取焦点</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-focus" class="uni-input" :focus="focus"
            @keyboardheightchange="inputFocusKeyBoardChange" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :confirm-hold="true" />
        </view>
      </view>

      <view>
        <view class="uni-title" @click="setCursor(4)">
          <text class="uni-title-text">设置输入框聚焦时光标的位置（点击生效）</text>
        </view>
        <view class="input-wrapper">
          <input ref="input" class="uni-input" value="0123456789" :cursor="cursor" @blur="onCursorBlurChange"/>
        </view>
      </view>

      <view>
        <view class="uni-title" @click="setSelection(0, 4)">
          <text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
        </view>
        <view class="input-wrapper">
          <input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
            :selection-end="selectionEnd" @blur="onSelectionBlurChange"/>
        </view>
      </view>

      <view>
        <view class="uni-title" style="flex-direction: row;align-items: center;">
          <text class="uni-title-text">设置光标颜色为红色</text>
          <switch style="margin-left: 10px;" @change="changeCursorColor" :checked="cursor_color=='red'"></switch>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">键盘弹起时，自动上推页面</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :adjust-position="true" />
        </view>
      </view>


      <view>
        <view class="uni-title" style="flex-direction: row;align-items: center;">
          <text class="uni-title-text">设置hold-keyboard</text>
          <switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="holdKeyboard"></switch>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :hold-keyboard="holdKeyboard" value="hold keyboard " />
        </view>
      </view>


      <view>
        <view class="uni-title">
          <text class="uni-title-text">input事件</text>
          <text class="uni-subtitle-text" v-if="inputEventDetail">{{inputEventDetail}}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @input="onInput" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">focus事件和blur事件</text>
          <text class="uni-subtitle-text" v-if="focusAndBlurEventDetail">{{focusAndBlurEventDetail}}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @focus="onFocus" @blur="onBlur" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">confirm事件</text>
          <text class="uni-subtitle-text" v-if="confirmEventDetail">{{confirmEventDetail}}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @confirm="onConfirm" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">keyboardheightchange事件</text>
          <text class="uni-subtitle-text"
            v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">带清除按钮的输入框</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
          <image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
          </image>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">可查看密码的输入框</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
          <image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'"
            @click="changePassword"></image>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>


<style scoped>
  .input-wrapper {
    display: flex;
    padding: 8px 13px;
    margin: 5px 0;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #ffffff;
  }

  .uni-input {
    height: 28px;
    font-size: 15px;
    padding: 0px;
    flex: 1;
    background-color: #ffffff;
  }

  .uni-icon {
    width: 24px;
    height: 24px;
  }

  .uni-input-placeholder-class {
    font-size: 10px;
  }
</style>

# 参见

# Tips

  • 从uni-app x 4.0起，App-Android平台 input 点击输入框外的屏幕会自动收起软键盘。
  • 从uni-app x 4.0起，App-Android平台 input 的 font-size 默认值统一为 16px。
  • web端iOS safari软键盘弹出时，整个页面会上推而不是挤压，从而导致导航栏可能会上移到屏幕之外。
本页导读
input
input 兼容性
属性
type 兼容性
confirm-type 兼容性
inputmode 兼容性
事件
UniInputEvent
UniInputFocusEvent
UniInputBlurEvent
UniInputKeyboardHeightChangeEvent
UniInputConfirmEvent
input 属性兼容性
子组件
示例
参见
Tips