input輸入框的官方api文檔：http://dev.dcloud.net.cn/mui/ui/#input

一、輸入框類型

輸入框的類型是根據type來決定是普通輸入框還是密碼框，搜索框等類型

1. <label>帳號</label>
2. <input id="mess" class="mui-input-clear" type="text" placeholder="請輸入帳號">
3. <label>密碼</label>
4. <input type="password" class="mui-input-clear" name="pass" placeholder="請輸入密碼" />

而id是可以用來獲取該輸入框，或者使用class來批量獲取。

二、輸入框內容獲取

1、比如這個帳號輸入框，可以使用id來獲取內容

1. document.getElementById("mess").value;

2、當然因為他是第一個，所以也可以使用document的方法來獲取

1. document.querySelector(".mui-input-clear").value

3、或者使用mui()加class來獲取組，通過獲得的array來獲取

1. mui("input.mui-input-clear")[0].value
2. //或者下面這個方法
3. mui(".mui-input-clear")[0].value

這個區別就是一個是獲取的input的所有包含mui-input-clear類型的，一個是所有的mui-input-clear類型的，可以查看官方文檔的mui()的說明

三、輸入框內容操作

獲取了輸入框內容，這裏最簡單的就是模擬一個登錄，按鈕綁定一個函數

1. <button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="sss()">登錄</button>

在button的sss方法中可以這麽寫

1. <script type="text/javascript">
2. function sss () {
3. var m = mui(".mui-input-clear");
4. var uncomplete = false;
5. mui.each(m,function (index,item) {
6. console.log(item.value);
7. if (!item.value||item.value.trim() == "") {
8. uncomplete = true;
9. }
10. });
11. if (uncomplete) {
12. mui.toast("請填寫信息");
13. } else{
14. mui.toast("登錄成功");
15. }
16. }
17. </script>

這樣如果沒有填寫就會彈出了沒有彈出信息的提醒了

點擊查看原圖

MUI框架之輸入框Input