在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等
1 基本使用
<input class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />
基本效果就是显示了一个文本输入框。
- placeholder 输入框为空时的占位符
- auto-focus 自动聚集，拉起键盘，需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性
2 获取输入框中的内容
bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。
当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。
<input bindinput="userNameInputAction" class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />对应的 js
/**
* 输入框实时回调
* @param {*} options
*/
userNameInputAction: function (options) {
//获取输入框输入的内容
let value = options.detail.value;
console.log("输入框输入的内容是 " + value)
},
在微信小程序开发中，input 用来实现文本输入，如输入用户名密码等等
1 基本使用
<input class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />
基本效果就是显示了一个文本输入框。
- placeholder 输入框为空时的占位符
- auto-focus 自动聚集，拉起键盘，需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性
2 获取输入框中的内容
bindinput 属性用来绑定键盘输入时的事件监听，也就是可以实时获取输入中的内容 。
当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。
<input bindinput="userNameInputAction" class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />对应的 js
/**
* 输入框实时回调
* @param {*} options
*/
userNameInputAction: function (options) {
//获取输入框输入的内容
let value = options.detail.value;
console.log("输入框输入的内容是 " + value)
},
效果
3 输入框焦点监听
应用场景还是比较多的，比如输入结束时 去校验个数据什么的
- bindfocus
- bindblur 输入框焦点移出
- bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件
<input bindfocus="userNameFocusAction" bindblur="userNameBlurAction" bindconfirm="userNameConfirm" placeholder="请输入用户名" />对应的 js
userNameFocusAction: function (options) {
//输入框焦点获取
let value = options.detail.value;
console.log("输入框焦点获取 " + value)
},
userNameBlurAction: function (options) {
//输入框焦点移出
let value = options.detail.value;
console.log("输入框焦点移出 " + value)
},
userNameConfirm: function (options) {
//点击了键盘上的完成按钮
let value = options.detail.value;
console.log("点击了键盘上的完成按钮 " + value)
},
效果图
4 常用输入限制
- disabled 默认为false 不禁用输入框，为true时是不可输入的
<input disabled="{{isInput}}" placeholder="请输入用户名" />Page({
/**
* 页面的初始数据
*/
data: {
isInput:true
},
})
password 默认为 false ，为true时，输入的内容为密码类型
<input password="true" placeholder="请输入用户名" />
5 type 文本框输入内容格式
在HTML中，input组件中的type属性可以接收哪些值，有button、text、radio、checkbox、hidden、image、reset、submit等。而在微信小程序中，type属性只有text、number、idcard、digit、time和date。
相关推荐
-
win7怎么进行磁盘清理（windows7磁盘清理步骤方法）
随着电脑使用的时间变长，磁盘上的垃圾也随着增多，有时候磁盘垃圾并不是单纯的删除些文件就那解决的，但是重装系统又太过麻烦，这种情况我们就能通过Win7系统自带的磁盘清理功能来清理垃圾了。 系统：win7旗舰版 电...
-
excel表格找回未保存的文件应用技巧攻略分享
日常工作中你是否有遇到电脑突然断电、表格闪退等原因导致文件未保存就关闭了，想必此时的心情非常糟糕，那可是花费了半天时间整理好的数据，那有没有办法再将文件找回呢，当然有办法找回。本篇就来介绍下恢复/找回...
-
OPPOK10上手体验如何（OPPOK10实际测评感受）
2022年4月24日OPPO召开的新品发布会，在这场发布会当中OPPO给广大消费者带来了两款新机型，分别是OPPOK10和OPPOK10Pro。在这两款机型当中，个人是更加喜欢性价比更高的OPPOK10这款手机会更多一些的。小芳我也是第一...
-
好闻的沐浴露有哪些品牌（香味比较持久的好闻的沐浴露推荐）
在家不能出门的日子里，最享受的放松方式就是舒服的洗个澡，而想来一个充满“仪式感”也能让自己心情愉悦的方法，那必然是选择一款好闻的沐浴露啦！ 今天妖姐要推荐自己珍藏的“超好闻又留香持久的沐浴露”！小本...
-
jquery中获取和设置元素属性的方法（jquery获取css属性值）
js插件jquery可以很方便的对HTML的元素进行操作，比如一些元素的显示与隐藏，一些元素的动态效果等，今天就说一说通过jquery获取DIV元素的CSS属性，以及设置DIV元素的CSS属性的方法。 jquery获取DIV元素的CSS属性值 ...
-
oppo平板哪款性价比高（高性价比平板选购指南）
以前很长一段时间里，大家平板只买iPad，生态好，配置高，还漂亮。 谁会想到现在安卓平板大爆发，华为、小米、三星、联想、OPPO、vivo都出平板。做手机的、做笔记本的，现在都下海做平板。 以前安卓平板是菜鸡互啄，...