微信小程序之输入框文本的获取与展示

上一篇说到了小程序的带参跳转问题，没有看过，现在去看看

此篇还是通过比较单间的示例来展示输入文本的获取，在当前界面的展示。

一、在wxml页面中进行简单布局

<view><label>用户名：</label><input class="input" name="user" placeholder="输入姓名" bindinput="username" />
</view>>
<view><label>密码：</label><input class="input" name="psw" placeholder="请输入密码！" password="true" bindinput="password" />
</view>
<view style="margin-top:30px;"><button style="width:30%;"  bindtap="subbutton">登录</button>
</view><view>用户名：{{userName}}</view>
<view>密码：{{psw}}</view>

说明：
1、password，true是隐藏密码，false是不隐藏密码。
2、margin-top，对象上面空出多少，30px。
3、最后，”“调用的是函数，{{}}引用的是值。

二、在JS页面中获取文本

1、定义:全局使用

  /*** 页面的初始数据*/data: {username: '',userpws: ""},

2、获取第一个文本用户名，username接收

  username: function (e) {this.setData({username: e.detail.value})},

3、获取第二个文本密码，userpws接收

 password: function (e) {this.setData({userpws: e.detail.value})},

4、绑定登录按钮点击事件，获取两个文本展示更新到当前页面

subbutton: function (e) {console.log("姓名" + this.data.username + "密码：" + this.data.userpws)this.setData({userName: this.data.username,psw: this.data.userpws})}

js文件说明：
1、代码都要写在page({})中。
2、data：{}给个初始化的值。
3、this.Data({})这也是个固定的，定义函数更新data的数据。
4、数据结构是json格式的。
subbutton: function (e){}：触发事件。

input的更多属性

button的更很多属性

-END

微信小程序之输入框文本的获取与展示相关推荐

微信小程序页面传值文本解密问题
微信小程序页面传值文本解密问题遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序安全系列——文本内容安全识别
前言相信很多朋友跟我遇到过相同的问题,就是在开发一些笔记或者博客的时候,会遇到一些过滤敏感.时政.黄.赌.毒这类词汇.句子等这种棘手问题. 今天我们看一下微信小程序提供的文本安全内容识别,也可以减少 ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信小程序 view的文本自动换行了的问题（scroll-view）/微信小程序 view换行跟不换行的解决方案
今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width ...
微信小程序实现长文本分段播放
微信小程序实现长文本分段播放接上篇微信小程序实现语音合成功能解决腾讯智能语音插件中文最大支持100个汉字的问题场景:需要合成100汉字以上的文本进行语音播报注意:本文示例代码是在上篇基础上进 ...
微信小程序官方调整头像昵称获取问题；微信扫码链接wifi，wifi地推，两种可行的解决方案
微信小程序官方调整头像昵称获取问题:微信扫码链接wifi,wifi地推更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访 ...
微信html字体颜色代码,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信小程序直播状态接口如何获取
现如今,小程序直播非常的红火,越来越多的商家开通了微信小程序直播,但是在直播的过程中,偶尔会出现一些小问题,如禁播,异常状态等等,下面小编就来介绍一下微信小程序直播状态接口如何获取. 一.微信小程序直 ...

微信小程序之输入框文本的获取与展示

微信小程序之输入框文本的获取与展示相关推荐

最新文章

热门文章