微信开发的输入控件示例详解（输入框架）

本文主要介绍微信小程序输入输入框控件的详细说明及相关实例资料（各种实例）。输入框是程序中最常见的，需要登录、注册、获取搜索框中的内容等。有需要的朋友可以参考一下。

微信小程序输入输入框控件

今天主要写微信小程序中的输入输入框控件。输入框是程序中最常见的。需要登录、注册、获取搜索框中的内容等。同时，有必要设置不同样式的输入框，在今天的代码中应该相应地使用这些输入框。首先，登录样式只是在主页面中显示和使用。

代码如下:

& lt！--如果在同一表单中创建了多个输入输入框，您可以为每个输入框创建自己的name =“userName“属性，并且可以通过添加属性来区分哪个输入框并提交它:bindsubmit = & quot方法名“Reset: bindset =“方法名“，清除输入框的内容。js文件中的用法，e . detail . value . username . length --》& lt；视图class = & quot项目视图& quot& gt用户名:

//获取应用程序实例varapp = getapp（）page（{ data:{ info mess:&；#39;& amp#39;用户名:& amp#39;& amp#39;，userN:& amp；#39;& amp#39;密码:& amp#39;& amp#39;，密码:& amp#39;& amp#39;}，//用户名和密码输入框事件用户名输入:function（e）{ this . setdata（{ usern:e . detail . value }）}，passwd输入:function（e）{ this . setdata（{ passw:e . detail . value }）} }，//登录按钮单击事件并调用。//若要设置参数值，请使用this . setdata（{ }）方法loginbtnclick:function（）{ if（this . data . usern . length = = 0 | | this . data . passw . length = = 0）{ this . setdata（{ info mess:&；#39;提示:用户名和密码不能为空！& amp#39;，}）} else { this . setdata（{ info mess:& amp；#39;& amp#39;用户名:& amp#39;用户& amp:&；#39;+this.data.userN，passWd:& amp；#39;密码:&；#39;+this . data . passw }）}、//重置按钮单击事件resetbtnclick:function（e）{ this . setdata（{ info mess:&；#39;& amp#39;用户名:& amp#39;& amp#39;，userN:& amp；#39;& amp#39;密码:& amp#39;& amp#39;，密码:& amp#39;& amp#39;，}）}，onLoad:function（）{ console . log（& amp；#39;上传和下载。#39;）var that = this //调用应用程序实例的方法以获取全局数据app。get userinfo（function（userinfo）{//更新。setdata（{ userinfo:userinfo }）} }）然后在第二个界面中显示不同样式和功能的输入。

& lt！--页面/索引/组件/TextInput/TextInput . wxml --& gt；& lt视图class = & quot视图标题& quot& gt& lttext class = & quotview -Name & quot；& gt文本输入输入框显示

//pages/index/Component/TextInput/TextInput . jspage（{ data:{ focus:false，input value:& amp；#39;& amp#39;}，bindButtonTap:function（）{ this . setdata（{ focus:true }）}，bindKeyInput:function（e）{ this . setdata（{ input value:e . detail . value }）}，bindReplaceInput:function（e）{ var value = e . detail . value var pos = e . cursor if（pos！= -1）{//光标在中间var left = e . detail . value . slice（0，pos）//计算光标的位置pos = left . replace（/11/g，&；#39;2 & amp#39;).length} //直接返回对象，可以过滤输入并控制光标位置返回{value: value。替换（/11/g，&；#39;2 & amp#39;），cursor: pos} //或者直接返回光标位于最后一条边的字符串//returnvalue。替换（/11/g，&；#39;2 & amp#39;），}，bindHideKeyboard:function（e）{ if（e . detail . value = = = = & quot；123&quot）{ //收好键盘wx . hide keyboard（）}}，onload:function（options）{//页面初始化选项带来的参数}，on ready:function（）{//页面渲染完成}，on show:function（）{//页面显示}，on hide:function（）{//页面隐藏}，on unload:function（）{//页面关闭} }）渲染结果:

【相关建议】

1.下载微信微信官方账号平台源代码。

2.微信货拉拉外卖2.2.4解密微信魔方开源版源代码。

这几篇文章你可能也喜欢：

• 微信小程序api可以实现哪些功能（wx小程序API）
• 微信小程序授权登录获取用户信息详解。
• 微信小程序打不开的原因是什么？
• 如何处理微信小程序中的转义字符（微信小程序类型转换）
• 详细讲解如何在微信开发中使用textarea(微信开发者工具文字居中)

本文由主机参考刊发，转载请注明：微信开发的输入控件示例详解（输入框架） https://zhujicankao.com/115188.html