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

一、輸入框類型

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

<label>帳號(hào)</label>

<input?id="mess"?class="mui-input-clear"?type="text"?placeholder="請(qǐng)輸入帳號(hào)">

<label>密碼</label>

<input?type="password"?class="mui-input-clear"?name="pass"?placeholder="請(qǐng)輸入密碼"?/>

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

二、輸入框內(nèi)容獲取

1、比如這個(gè)帳號(hào)輸入框，可以使用id來獲取內(nèi)容

document.getElementById("mess").value;

2、當(dāng)然因?yàn)樗堑谝粋€(gè)，所以也可以使用document的方法來獲取

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

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

mui("input.mui-input-clear")[0].value

//或者下面這個(gè)方法

mui(".mui-input-clear")[0].value

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

三、輸入框內(nèi)容操作

獲取了輸入框內(nèi)容，這里最簡(jiǎn)單的就是模擬一個(gè)登錄，按鈕綁定一個(gè)函數(shù)

<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("請(qǐng)?zhí)顚懶畔?#34;);

}?else{

mui.toast("登錄成功");

}

????}

</script>

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

點(diǎn)擊查看原圖

? ? ?

總結(jié)

以上是生活随笔為你收集整理的MUI框架之输入框Input的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。