导航：首页 > 开发技术 >

微信小程序如何获取输入框

发表于：2024-11-23 作者：千家信息网编辑

千家信息网最后更新 2024年11月23日，这篇文章主要介绍了微信小程序如何获取输入框的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序如何获取输入框文章都会有所收获，下面我们一起来看看吧。input输入框。

千家信息网最后更新 2024年11月23日微信小程序如何获取输入框

这篇文章主要介绍了微信小程序如何获取输入框的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序如何获取输入框文章都会有所收获，下面我们一起来看看吧。

input

输入框。

属性名	类型	默认值	说明	最低版本
value	String		输入框的初始内容
type	String	"text"	input 的类型
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	"input-placeholder"	指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus	Boolean	false	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus	Boolean	false	获取焦点
confirm-type	String	"done"	设置键盘右下角按钮的文字	1.1.0
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	1.1.0
bindinput	EventHandle		当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	EventHandle		输入框聚焦时触发，event.detail = {value: value}
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
bindconfirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}

type 有效值：

值	说明
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

confirm-type 有效值：

值	说明
send	右下角按钮为"发送"
search	右下角按钮为"搜索"
next	右下角按钮为"下一个"
go	右下角按钮为"前往"
done	右下角按钮为"完成"

示例代码：

你输入的是：{{inputValue}}

//input.jsPage({  data:{    focus:false,    inputValue:""  },  bindButtonTap:function(){this.setData({      focus: true    })  },  bindKeyInput:function(e){this.setData({      inputValue:e.detail.value    })  },  bindReplaceInput:function(e){var value = e.detail.value;var pos = e.detail.cursor;if(pos != -1){      //光标在中间  var left = e.detail.value.slice(0,pos);      //计算光标的位置  pos = left.replace(/11/g,'2').length;    }//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置return {      value:value.replace(/11/g,'2'),      cursor:pos    }//或者直接返回字符串,光标在最后边//return value.replace(/11/g,'2'),  }})