input(輸入表單)

基本說(shuō)明

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="語(yǔ)音輸入">
    </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按鈕沒(méi)有type屬性，瀏覽器默認(rèn)按照type=submit邏輯處理，
這樣若將沒(méi)有type的button放在form表單中，點(diǎn)擊按鈕就會(huì)執(zhí)行form表單提交，頁(yè)面就會(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">語(yǔ)音輸入搜索框：</h5>
<div class="mui-input-row mui-search mui-plus-visible">
    <input id="speech" type="search" class="mui-input-speech mui-input-clear" placeholder="帶語(yǔ)音輸入的搜索框">
</div>
<h5>密碼框：</h5>
<div class="mui-input-row mui-password">
    <input type="password" class="mui-input-password">
</div>

輸入增強(qiáng)

mui目前提供的輸入增強(qiáng)包括：快速刪除和語(yǔ)音輸入兩項(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+的語(yǔ)音輸入，只需要在對(duì)應(yīng)input控件上添加.mui-input-speech
類，就會(huì)在該控件右側(cè)顯示一個(gè)語(yǔ)音輸入的圖標(biāo)，點(diǎn)擊會(huì)啟用科大訊飛語(yǔ)音輸入界面，但是語(yǔ)音輸入只能在5+環(huán)境
下使用，為了在web環(huán)境下不出錯(cuò)，我們可以使用.mui-plus-visible將只能在5+環(huán)境下正常使用的內(nèi)容在web環(huán)境
下隱藏，反過(guò)來(lái)我們可以使用 .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)聽(tīng)事件

輸入框的變化監(jiān)聽(tīng)事件

通過(guò)監(jiān)聽(tīng)輸入框input事件，可以監(jiān)聽(tīng)到輸入框變化。

var search = document.getElementById('search');
search.addEventListener('input',function () {
    console.log(search.value);
})

軟鍵盤右下角按鍵監(jiān)聽(tīng)事件

為了監(jiān)聽(tīng)軟鍵盤右下角按鍵事件，我們常采用下面的方法：

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");
});

注:通過(guò)修改form 表單下input的type屬性值為search可以改變軟鍵盤右下角的文字為search。

語(yǔ)音識(shí)別完成事件

document.getElementById("speech").addEventListener('recognized', function(e) {
    console.log(e.detail.value);
});

擴(kuò)展閱讀

使用Native.js實(shí)現(xiàn)打開(kāi)頁(yè)面默認(rèn)彈出軟鍵盤

代碼塊激活字符: minput