MUI框架之输入框Input

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>

这样如果没有填写就会弹出了没有弹出信息的提醒了

点击查看原图

MUI框架之输入框Input相关推荐

bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
php mui.picker,www MUI框架里边有很多例子教你如何使用开发手机界面 WEB(ASP,PHP,...) 251万源代码下载- www.pudn.com...
文件名称: www下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 1362 KB 上传时间: 2016-01-19 下载次数: 0 提供者: ck 详细说明 ...
细数mui框架走过的坑
一.2018.06.21mui.alert().mui.confirm()等弹窗系列 mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得 ...
使用MUI框架构建App请求http接口实例
简介最近在看Dcloud的MUI框架,MUI封装了android.ios等多个平台的原生接口,达到开发一个项目,采取不同打包方式,生产多种平台的app. 无可厚非,对于从事java web开发的工程 ...
layui文本框填充值_layui框架常用输入框介绍
一.普通输入框 input *字段编号二.自动完成式输入框 1.确保 layui 引入了 autoComplete 插件. 2.确保初始化代码运行于 layui.use 的回调函数里. 3.引入 b ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（二）带你项目开发（最新版）
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的"无为,而无所不为",也无法理解范仲淹的"不以物喜不以己悲".可是再没兴趣,学习还是要继续!!!为 ...
mui框架mui-active高亮当前栏目 - 代码说明
文章目录 mui框架mui-active高亮当前栏目 - 代码说明项目案例 · 截图示下: 公共导航的代码: 1. `html`代码: 2. `js`代码: mui框架mui-active高亮当前栏 ...

MUI框架之输入框Input

一、输入框类型

二、输入框内容获取

三、输入框内容操作

MUI框架之输入框Input相关推荐

最新文章

热门文章