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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。