·小程序开启了愉快的聊天模式 ？

看到小红通过了它的好友申请，小蓝赶紧发起聊天：小红美眉，你平时喜欢做什么 呀，有空我们可以一起约呀。此处就可以使用 input 输入框啦，不仅可以输入文 字还可以输入数字、密码哦。 输入框，可设置输入内容的类型、长度、显示形式等。当用户需要输入文字内容时 点击文本框，它将自动打开键盘。使用文本字段来请求少量信息。 注意：  iOS 系统支付宝客户端版本 10.1.80 及以上不支持 focus=true 自动唤起。  小程序中 input 如果父类是 position: fixed，可以加上 enableNative="{{false}}"，解决 输入框错位问题。 示例代码

<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>

 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: '',
 });
 },
});

.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 的类型，有效值： text、 number、 idcard、 digit(可以唤起带有小数点的数 字键盘)、numberpad、 digitpad、 idcardpad。 numberpad、 digitpad、 idcardpad 基 础库 1.13.0 客户端 96 10.1.50，可通 过 my.canIUse(i nput.type.nu mberpad)来 检测。 password Boolean false 是否是密码类型 - placeholder String - 占位符 - placeholderstyle String - 指定 placeholder 的样式， 可设置间距 1.6.0 placeholderclass 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 时的光标位置 - selectionstart Number -1 获取光标时，选中文本对应的 焦点光标起始位置，需要和 selection-end 配合使用 1.7.0 97 selectionend Number -1 获取光标时，选中文本对应的 焦点光标结束位置，需要和 selection-start 配合使用 1.7.0 randomNum ber Boolean false 当 type 为 number, digit, idcard 数字键盘是否随机排 列 1.9.0 controlled Boolean false 是否为受控组件。为 true 时，value 内容会完全受 setData 控制 1.8.0 onInput EventHa ndle

键盘输入时触发 input 事件， event.detail = {value: value}

onConfirm EventHa ndle

点击键盘完成时触发， event.detail = {value: value}

onFocus EventHa ndle

聚焦时触发，event.detail = {value: value}

onBlur EventHa ndle

失去焦点时触发（仅支持真 机），event.detail = {value: value} 内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library