支付寶小程序表單組件 輸入框·Input

輸入框，可設(shè)置輸入內(nèi)容的類型、長(zhǎng)度、顯示形式等。當(dāng)用戶需要輸入文字內(nèi)容時(shí)點(diǎn)擊文本框，它將自動(dòng)打開鍵盤。使用文本字段來(lái)請(qǐng)求少量信息。

注意：

• iOS 系統(tǒng)支付寶客戶端版本10.1.80及以上不支持 focus=true 自動(dòng)喚起。
• 小程序中 input 如果父類是 position: fixed，可以加上 enableNative="{{false}}"，解決輸入框錯(cuò)位/光標(biāo)上移問(wèn)題。個(gè)別情況下定位問(wèn)題會(huì)導(dǎo)致光標(biāo)錯(cuò)位，所以需要把 false 改為 true，代碼塊為 enableNative="{{true}}"。

掃碼體驗(yàn)

示例代碼

<!-- 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">最大長(zhǎng)度</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 自動(dòng)收起鍵盤" />
      </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">輸入數(shù)字</view>
      <view class="form-row-content">
        <input class="input" type="number" placeholder="數(shù)字輸入框" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">小數(shù)點(diǎn)鍵盤</view>
      <view class="form-row-content">
        <input class="input" type="digit" placeholder="帶小數(shù)點(diǎn)的數(shù)字鍵盤" />
      </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 事件和這個(gè)沖突
    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;
}

屬性

常見問(wèn)題

如何解決 input 輸入框在 iOS 客戶端的光標(biāo)漂移問(wèn)題？

步驟一：若已在 input 中設(shè)置了 enableNative 屬性，刪除 enableNative 屬性的全部設(shè)置。

步驟二：在 app.json 文件 window 對(duì)象內(nèi)，設(shè)置 "enableInPageRenderInput":"YES"。

為何 input 輸入框聚焦的時(shí)候出現(xiàn)白屏，只有鍵盤彈出來(lái)？

因?yàn)槭褂枚ㄎ粚?dǎo)致鍵盤把頁(yè)面 input 內(nèi)容頂上去了，建議使用 SearchBar 搜索框。

為何 input 輸入的內(nèi)容沒有在輸入框顯示？

商戶有使用 fixed 定位 建議更換 fixed 定位使用相對(duì)或者絕對(duì)定位。

小程序 input 輸入框獲取焦點(diǎn)時(shí)會(huì)向上推輸入框，能否固定？

暫不支持 ，input 是在聚焦的時(shí)候彈起 ，失去焦點(diǎn)的時(shí)候收起，若讓鍵盤處于一直彈起狀態(tài)，就要保證 input 一直聚焦。

input 輸入框彈起鍵盤有遮擋，影響其他標(biāo)簽控件觸發(fā)點(diǎn)擊事件？

建議修改自定義 view 樣式。

input 輸入框是否支持點(diǎn)擊事件，比如 click、tap、touchstart？

暫時(shí)不支持，可以考慮外嵌一層 view，利用 view 的 onTap 事件實(shí)現(xiàn)。

input 如何用 js 代碼清空數(shù)據(jù)？

需要添加屬性 controlled="{{true}}" ，也可以在 onInput 事件里把輸入的值通過(guò) setData 再賦值給 value，再去 setData 設(shè)置 value。

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

input 如何進(jìn)行監(jiān)聽，如果出現(xiàn)不能監(jiān)聽問(wèn)題如何解決？

可以使用 input 的 onInput 事件監(jiān)聽輸入值，通過(guò) e.detail.value 打印出輸入值進(jìn)行正則表達(dá)式匹配校驗(yàn)。詳情請(qǐng)見示例代碼。

如何判斷 input 的 value 值是不是符合正則表示式？

使用 var reg = new RegExp("\w+\s", "g")； getRegExp() 需要在 sjs 中使用。 sjs 腳本不能直接在 js 中引入調(diào)用。

父組件如何調(diào)用子組件的 input 事件?

請(qǐng)參見 組件對(duì)象。

input 內(nèi)容跳動(dòng)、延遲如何處理？

可以使用防抖動(dòng)，示例代碼如下：

var timer = null


element.input = function () {


    clearTimeout(timer) // 每次進(jìn)來(lái)的時(shí)候都將之前的清除掉，如果還沒到一秒的時(shí)候就將之前的清除掉，這樣就不會(huì)觸發(fā)之前setTimeout綁定的事件， 如果超過(guò)一秒，之前的事件就會(huì)被觸發(fā)下次進(jìn)來(lái)的時(shí)候同樣清除之前的timer


    timer = setTimeout(function () {


        // 在這里進(jìn)行我們的操作  這樣就不會(huì)頻繁的進(jìn)行我們這里面的操作了


    }, 1000)


}

如何在 input 設(shè)置了 disabled=true 時(shí)，修改 input 的樣式 ？

修改字體顏色，會(huì)有灰蒙顏色的效果，無(wú)法去除。如果只想顯示內(nèi)容，建議使用 view 實(shí)現(xiàn)顯示內(nèi)容。

.extra-info {
  border-top: 1px solid #ddd;
  margin-left: 30rpx;
  padding: 20rpx 0;
  overflow: auto;
  disabled：true;
  color: red
}