input(輸入表單)
基本說明
mui輸入表單包括單行輸入框input和多行輸入框textarea,當(dāng)我們使用form表單時(shí)彰阴，想要得到類似列表的輸入框組丘薛，
給form添加.mui-input-group類，每個(gè)輸入框添加.mui-input-row。如果不添加label標(biāo)簽，輸入框
默認(rèn)寬度為100%；添加label標(biāo)簽后輸入框?qū)挾饶J(rèn)為65%妖啥。
表單輸入框
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通輸入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="帶清除按鈕的輸入框">
</div>
<div class="mui-input-row mui-plus-visible">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="語音輸入">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" onclick="return false;">確認(rèn)</button>
<button type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
</div>
</form>
注：始終為button按鈕添加type屬性，若button按鈕沒有type屬性对碌，瀏覽器默認(rèn)按照type=submit邏輯處理荆虱，
這樣若將沒有type的button放在form表單中，點(diǎn)擊按鈕就會(huì)執(zhí)行form表單提交朽们，頁面就會(huì)刷新怀读，用戶體驗(yàn)極差。
其他常用輸入框
<h5>默認(rèn)搜索框：</h5>
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-clear" placeholder="">
</div>
<h5 class="mui-plus-visible">語音輸入搜索框：</h5>
<div class="mui-input-row mui-search mui-plus-visible">
<input id="speech" type="search" class="mui-input-speech mui-input-clear" placeholder="帶語音輸入的搜索框">
</div>
<h5>密碼框：</h5>
<div class="mui-input-row mui-password">
<input type="password" class="mui-input-password">
</div>
輸入增強(qiáng)
mui目前提供的輸入增強(qiáng)包括：快速刪除和語音輸入兩項(xiàng)功能骑脱。要?jiǎng)h除輸入框中的內(nèi)容菜枷，使用輸入法鍵盤上的刪除按鍵，
只能逐個(gè)刪除字符叁丧，mui提供了快速刪除能力啤誊，只需要在對(duì)應(yīng)input控件上添加.mui-input-clear類，當(dāng)input
控件中有內(nèi)容時(shí)拥娄，右側(cè)會(huì)有一個(gè)刪除圖標(biāo)蚊锹，點(diǎn)擊會(huì)清空當(dāng)前input的內(nèi)容；
另外稚瘾，為了方便快速輸入枫耳，mui集成了HTML5+的語音輸入，只需要在對(duì)應(yīng)input控件上添加.mui-input-speech
類孟抗，就會(huì)在該控件右側(cè)顯示一個(gè)語音輸入的圖標(biāo)，點(diǎn)擊會(huì)啟用科大訊飛語音輸入界面钻心，但是語音輸入只能在5+環(huán)境
下使用凄硼，為了在web環(huán)境下不出錯(cuò)，我們可以使用.mui-plus-visible將只能在5+環(huán)境下正常使用的內(nèi)容在web環(huán)境
下隱藏捷沸，反過來我們可以使用 .mui-plus-hidden將在web中正常顯示的內(nèi)容在5+環(huán)境下隱藏摊沉。
<div class="mui-input-row mui-plus-visible">
<label>mui-plus-visible</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="我在web環(huán)境下隱藏5+環(huán)境下顯示">
</div>
<div class="mui-input-row mui-plus-hidden">
<label>mui-plus-hidden</label>
<input type="text" class="mui-input-clear" placeholder="我在web環(huán)境下顯示5+環(huán)境下隱藏">
</div>
監(jiān)聽事件
輸入框的變化監(jiān)聽事件
通過監(jiān)聽輸入框input事件，可以監(jiān)聽到輸入框變化痒给。
var search = document.getElementById('search');
search.addEventListener('input',function () {
console.log(search.value);
})
軟鍵盤右下角按鍵監(jiān)聽事件
為了監(jiān)聽軟鍵盤右下角按鍵事件说墨，我們常采用下面的方法：
html：
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-clear" placeholder="">
</div>
javascript:
document.getElementById('search').addEventListener('keydown',function (e) {
console.log(e.keyCode);
if(e.keyCode == 13){
console.log("search");
}
})
但是這種方法在部分手機(jī)軟鍵盤兼容性不好骏全，所以不妨采用綁定form表單提交事件：
html：
<form action="">
<input type="text" name="username">
<button type="submit" class="mui-btn mui-btn-block">保 存</button>
</form>
javascript:
document.querySelector('form').addEventListener('submit', function(e){
e.preventDefault(); // 阻止默認(rèn)事件
console.log("go");
});
注:通過修改form 表單下input的type屬性值為search可以改變軟鍵盤右下角的文字為search。
語音識(shí)別完成事件
document.getElementById("speech").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
擴(kuò)展閱讀
使用Native.js實(shí)現(xiàn)打開頁面默認(rèn)彈出軟鍵盤
代碼塊激活字符: minput
