• 下载
  • 社区

input 输入框

输入框,可设置输入内容的类型、长度、显示形式等。

注意:

  • iOS 系统不支持自动唤起 focus 属性。
  • 小程序中 input 如果父类是 position: fixed,可以加上 enableNative="{{false}}",解决输入框错位问题。

扫码体验

img.jpg

效果示例

输入框.png

示例代码

<!-- API-DEMO page/component/input/input.axml -->
<view class="page">
  <view class="page-description">输入框</view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label">受控聚焦</view>
      <view class="form-row-content">
        <input class="input" focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="input something" />
      </view>
    </view>
    <view class="page-section-btns">
      <button size="mini" onTap="bindButtonTap">聚焦</button>
    </view>
  </view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label"><label for="controlled">显示输入</label></view>
      <view class="form-row-content">
        <input class="input" id="controlled" onInput="bindKeyInput" placeholder="show input content" />
      </view>
    </view>
    <view class="extra-info">你输入的是:{{inputValue}}</view>
  </view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label">最大长度</view>
      <view class="form-row-content">
        <input class="input" maxlength="10" placeholder="maxlength 10" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">收起键盘</view>
      <view class="form-row-content">
        <input class="input" onInput="bindHideKeyboard" placeholder="输入 123 自动收起键盘" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">输入密码</view>
      <view class="form-row-content">
        <input class="input" password type="text" placeholder="密码输入框" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">输入数字</view>
      <view class="form-row-content">
        <input class="input" type="number" placeholder="数字输入框" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">小数点键盘</view>
      <view class="form-row-content">
        <input class="input" type="digit" placeholder="带小数点的数字键盘" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">身份证键盘</view>
      <view class="form-row-content">
        <input class="input" type="idcard" placeholder="身份证输入键盘" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">搜索框</view>
    <view class="page-section-demo">
      <view class="search-outer">
        <input
          class="search-input"
          placeholder="搜索"
          value="{{search}}"
          onConfirm="doneSearch"
          onInput="handleSearch"
        />
        <text class="search-cancel" onTap="clearSearch">取消</text>
      </view>
    </view>
  </view>
</view>
// API-DEMO page/component/input/input.js
Page({
  data: {
    focus: false,
    inputValue: '',
  },
  bindButtonTap() {
    // blur 事件和这个冲突
    setTimeout(() => {
      this.onFocus();
    }, 100);
  },
  onFocus() {
    this.setData({
      focus: true,
    });
  },
  onBlur() {
    this.setData({
      focus: false,
    });
  },
  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value,
    });
  },
  bindHideKeyboard(e) {
    if (e.detail.value === '123') {
      // 收起键盘
      my.hideKeyboard();
    }
  },
  handleSearch(e) {
    console.log('search', e.detail.value);
    this.setData({
      search: e.detail.value,
    });
  },
  doneSearch() {
    console.log('doneSearch', this.data.search);
    my.hideKeyboard();
  },
  clearSearch() {
    console.log('clear search', this.data.search);
    this.setData({
      search: '',
    });
  },
});
/* API-DEMO page/component/input/input.acss */
.extra-info {
  border-top: 1px solid #ddd;
  margin-left: 30rpx;
  padding: 20rpx 0;
  overflow: auto;
}
.search-outer {
  box-sizing: border-box;
  display:flex;
  height:40px;
  overflow:hidden;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  background-color: #efeff4;
}
.search-outer * {
  box-sizing: border-box;
}
.search-input {
  flex:1;
  text-align: left;
  display: block;
  color: #000;
  height: 24px;
  font-size: 15px;
  background-color: #fff;
  border-color: transparent;
}
.search-input:focus + .search-cancel {
  margin-right:0;
  opacity: 1;
}
.search-cancel {
  margin-right:-40px;
  display: inline-block;
  opacity: 0;
  padding-left: 8px;
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: #108ee9;
  text-align: right;
  transition: margin-right .3s,opacity .3s;
  transition-delay: .1s;
}

属性

属性 类型 默认值 描述 最低版本
value String - 初始内容 -
name String - 组件名字,用于表单提交获取数据 -
type String text input 的类型,有效值:textnumberidcarddigit(可以唤起带有小数点的数字键盘)、numberpaddigitpadidcardpad numberpaddigitpadidcardpad 基础库 1.13.0 客户端 10.1.50,可通过 my.canIUse(input.type.numberpad)来检测。
password Boolean false 是否是密码类型 -
placeholder String - 占位符 -
placeholder-style String - 指定 placeholder 的样式,可设置间距 1.6.0
placeholder-class String - 指定 placeholder 的样式类 1.6.0
disabled Boolean false 是否禁用 -
maxlength Number 140 最大长度 -
focus Boolean false 获取焦点 -
confirm-type String done 设置键盘右下角按钮的文字,有效值:done(显示“完成”)、go(显示“前往”)、next(显示“下一个”)、search(显示“搜索”)、send(显示“发送”),平台不同显示的文字略有差异。注意:只有在 type=text 时有效 1.7.0
confirm-hold Boolean false 点击键盘右下角按钮时是否保持键盘不收起状态 1.7.0
cursor Number - 指定 focus 时的光标位置 -
selection-start Number -1 获取光标时,选中文本对应的焦点光标起始位置,需要和 selection-end 配合使用 1.7.0
selection-end Number -1 获取光标时,选中文本对应的焦点光标结束位置,需要和 selection-start 配合使用 1.7.0
randomNumber Boolean false 当 type 为 number, digit, idcard 数字键盘是否随机排列 1.9.0
controlled Boolean false 是否为受控组件。为 true 时,value 内容会完全受 setData 控制 1.8.0
onInput EventHandle - 键盘输入时触发 input 事件,event.detail = {value: value} -
onConfirm EventHandle - 点击键盘完成时触发,event.detail = {value: value} -
onFocus EventHandle - 聚焦时触发,event.detail = {value: value} -
onBlur EventHandle - 失去焦点时触发(仅支持真机),event.detail = {value: value} -

常见问题

为何 input 输入框聚焦的时候出现白屏,只有键盘弹出来?

因为使用定位导致键盘把页面 input 内容顶上去了,建议使用 SearchBar 搜索框。

为何 input 输入的内容没有在输入框显示?

商户有使用 fixed 定位 建议更换 fixed 定位使用相对或者绝对定位。

小程序 input 输入框获取焦点时会向上推输入框,能否固定?

暂不支持 ,input 是在聚焦的时候弹起 ,失去焦点的时候收起,若让键盘处于一直弹起状态,就要保证 input 一直聚焦。

input 输入框弹起键盘有遮挡,影响其他标签控件触发点击事件?

建议修改自定义 view 样式。

input 输入框是否支持点击事件,比如 click、tap、touchstart?

暂时不支持,可以考虑外嵌一层 view,利用 view 的 onTap 事件实现。

input 如何用 js 代码清空数据?

需要添加属性 controlled="{{true}} ,也可以在 onInput 事件里把输入的值通过 setData 再赋值给 value,再去 setData 设置 value。

/axml<br><input class="internet_input" value="{{textValue}}" onInput="keyNum" controlled={{true}} type="text"  />
//input怎么用js清空
keyNum() {
      this.setData({
        textValue:''
    })
 }

input 如何进行监听,如果出现不能监听问题如何解决?

可以使用 input 的 onInput 事件监听输入值,通过 e.detail.value 打印出输入值进行正则表达式匹配校验。详情请见示例代码

如何判断 input 的 value 值是不是符合正则表示式?

使用 var reg = new RegExp("\w+\s", "g"); getRegExp() 需要在 sjs 中使用。
sjs 脚本不能直接在 js 中引入调用。

父组件如何调用子组件的 input 事件?

请参见 组件对象