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>

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

版权属于：东哥笔记 - DongGe.org

本文链接：https://dongge.org/blog/364.html

自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！