网站开发算是固定资产吗,个人简历通用免费模板,织梦网站访问量统计代码,泰兴网站推广做网站微信小程序提供了两种输入类型的输入框组件#xff0c;分别是单行输入框 input 和多行输入框 textarea。
1. 单行输入组件#xff08;input#xff09;
单行输入框 input input 是一个用于收集用户输入的组件#xff0c;主要用于收集单行…微信小程序提供了两种输入类型的输入框组件分别是单行输入框 input 和多行输入框 textarea。
1. 单行输入组件input
单行输入框 input input 是一个用于收集用户输入的组件主要用于收集单行文本输入。
input组件用于录入单行文本尽管input的基本功能是文本录入但该组件的属性还是比较多的也比较复杂。
重要的属性有
主要的监听事件有
value输入框的初始内容typeinput 的类型如 text, number, idcard, digit等password是否是密码类型placeholder输入框为空时占位符disabled是否禁用maxlength最大输入长度confirm-type设置键盘右下角按钮的文字如 send, search, next, go, done等confirm-hold点击键盘右下角按钮时是否保持键盘不收起bindinput当键盘输入时触发 input 事件bindfocus输入框聚焦时触发bindblur输入框失去焦点时触发bindconfirm点击完成时键盘输入法收起的事件 如下为input组件的属性及其含义 valueString类型输入框的当前内容typeString类型默认值是text。可指定的值text, number, idcard, digitpasswordBoolean类型默认值是false是否以密码形式录入文本所有的文本字符都显示为点placeholderString类型输入框为空时显示的文本placeholder-styleString类型指定 placeholder 的样式placeholder-classString类型指定 placeholder 的样式名称disabledBoolean类型默认值是false表示是否禁用输入框maxlengthNumber类型默认值是140表示文本最大输入长度设置为 -1 的时候不限制最大长度auto-focusBoolean类型默认值是false该属性为true可以让当前输入框自动获得焦点并且自动弹出软键盘。该属性只能在真机上测试小程序开发工具目前没有软键盘。同一个wxml文件中只能有一个输入框设置该属性为true输入框还包括后面要介绍的textarea组件focusBoolean类型默认值是false该属性可以让输入框获的焦点目前开发工具暂不支持只能在真机上测试bindinputEventHandle类型 除了date/time类型外的输入框当键盘输入时触发input事件event.detail {value: value}处理函数可以直接 return 一个字符串将替换输入框的内容bindfocus EventHandle类型输入框获得焦点时触发event.detail {value: value}bindblurEventHandle类型输入框失去焦点时触发event.detail {value: value} 注意这些属性中auto-focus和focus目前只能在真机上测试。 常用使用方法实例
view stylemargin:20pxinput placeholder请输入你的姓名 value默认值 /input placeholder-stylecolor:green placeholder占位符字体是绿色的 auto-focus/input stylemargin-top:25px placeholder这个只有在按钮点击的时候才聚焦 focus{{focus}} /button bindtapbindButtonTap使得输入框获取焦点在真机上测试/buttoninput stylemargin-top:25px maxlength10 placeholder最大输入长度10 /view stylemargin-top:25px你输入的是{{inputValue}}/viewinput bindinputbindKeyInput placeholder输入同步到view中 /input stylemargin-top:25px bindinputbindReplaceInput placeholder将和进行转义 /input stylemargin-top:25px bindinputbindHideKeyboard placeholder输入close自动收起键盘 /input stylemargin-top:25px typeemoji placeholder这是一个带有表情的输入框 /input typedigit placeholder带小数点的数字键盘 /input typeidcard placeholder身份证输入键盘 /input passwordtrue placeholder请输入你的密码 /
/view
完整实现代码如下
Page({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(//g,).replace(//g,).length;}//直接返回对象可以对输入进行过滤处理同时可以控制光标的位置return {value:value.replace(//g,).replace(//g,),cursor:pos}},bindHideKeyboard:function(e){if(e.detail.value close){//收起键盘wx.hideKeyboard();}}
}) 2. 多行文本组件textarea
多行输入框 textarea textarea 是用来输入多行文本的。
textarea允许输入多行文本如果文本行数超过textarea组件的高度会出现垂直滚动条。
重要的属性有
value输入框的初始内容placeholder输入框为空时占位符disabled是否禁用maxlength最大输入长度autoHeight是否自动增高设置autoHeight时style.height不生效
主要的监听事件同 input。 textarea有如下几个属性。 valueString类型输入框的内容placeholderString类型输入框为空时显示的文本placeholder-styleString类型指定 placeholder 的样式placeholder-classString类型指定 placeholder 的样式类名称disabledBoolean类型默认值是false是否禁用textarea组件maxlengthNumber类型默认值是140最大输入长度设置为0的时候不限制最大长度auto-focusBoolean类型默认值是false用于自动聚焦当获得焦点后自动弹出软键盘当前页面中只能有一个 textarea/ 或 input/ 设置 auto-focus 属性focusBoolean类型默认值是false获取焦点开发工具暂不支持auto-heightBoolean类型默认值是false表示是否自动增高设置auto-height时style.height不生效bindfocus EventHandle类型输入框聚焦时触发bindblurEventHandle类型输入框失去焦点时触发bindlinechangeEventHandle 类型输入框行数变化时调用 textarea组件的基本用法实例
view stylemargin:20pxtextarea bindblurbindTextAreaBlur auto-height placeholder自动变高 stylebackground:#ff0/
/view
view stylemargin:20pxtextarea placeholderplaceholder颜色是红色的 placeholder-stylecolor:red; /
/view
view stylemargin:20pxtextarea placeholder这是一个可以自动聚焦的textarea auto-focus /
/view
view stylemargin:20pxtextarea placeholder这个只有在按钮点击的时候才聚焦 focus{{focus}} /view classbtn-areabutton bindtapbindButtonTap使得输入框获取焦点/button/view
/view 第一个textarea组件设置了auto-height属性该组件会随着行数的增加而变高。
