MUI框架之输入框Input
2024-10-19 23:36:08
input输入框的官方api文档:http://dev.dcloud.net.cn/mui/ui/#input
一、输入框类型
输入框的类型是根据type来决定是普通输入框还是密码框,搜索框等类型
- <label>帐号</label>
- <input id="mess" class="mui-input-clear" type="text" placeholder="请输入帐号">
- <label>密码</label>
- <input type="password" class="mui-input-clear" name="pass" placeholder="请输入密码" />
而id是可以用来获取该输入框,或者使用class来批量获取。
二、输入框内容获取
1、比如这个帐号输入框,可以使用id来获取内容
- document.getElementById("mess").value;
2、当然因为他是第一个,所以也可以使用document的方法来获取
- document.querySelector(".mui-input-clear").value
3、或者使用mui()加class来获取组,通过获得的array来获取
- mui("input.mui-input-clear")[0].value
- //或者下面这个方法
- mui(".mui-input-clear")[0].value
这个区别就是一个是获取的input的所有包含mui-input-clear类型的,一个是所有的mui-input-clear类型的,可以查看官方文档的mui()的说明
三、输入框内容操作
获取了输入框内容,这里最简单的就是模拟一个登录,按钮绑定一个函数
- <button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="sss()">登录</button>
在button的sss方法中可以这么写
- <script type="text/javascript">
- function sss () {
- var m = mui(".mui-input-clear");
- var uncomplete = false;
- mui.each(m,function (index,item) {
- console.log(item.value);
- if (!item.value||item.value.trim() == "") {
- uncomplete = true;
- }
- });
- if (uncomplete) {
- mui.toast("请填写信息");
- } else{
- mui.toast("登录成功");
- }
- }
- </script>
这样如果没有填写就会弹出了没有弹出信息的提醒了
最新文章
- Effective Java 59 Avoid unnecessary use of checked exceptions
- JavaScript系列:《JavaScript高级程序设计》,chapter2, 在html中使用JavaScript
- JS面向对象概述
- android SQLite使用SQLiteOpenHelper类对数据库进行操作
- Java日期时间使用总结
- windows创建虚拟界面
- 用Windows Live Writer发来
- [置顶] Quartz的DateBuilder详解
- Java持久化存储对象Properties的方法list、store、load
- POJ1226 - Substrings(KMP+二分)
- .Net下的MSMQ(微软消息队列)的同步异步调用
- mysql 权限分配及创建新用户
- centos6的安装,一步一图,有图有真相
- c++ TCP keepalive 使用
- [翻译 EF Core in Action 2.1] 设置一个图书销售网站的场景
- ubuntu系统部署web项目
- jQuery对象
- autoit 中文API
- Android源码博客目录
- codis+redis集群学习整理(待续)