mui input输入表单详解

基本说明
mui输入表单包括单行输入框input和多行输入框textarea,当我们使用form表单时，想要得到类似列表的输入框组， 给form添加.mui-input-group类，每个输入框添加.mui-input-row。如果不添加label标签，输入框 默认宽度为100%；添加label标签后输入框宽度默认为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;">确认</button>&nbsp;&nbsp;
 <button type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
 </div>
</form>

注：始终为button按钮添加type属性，若button按钮没有type属性，浏览器默认按照type=submit逻辑处理， 这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

其他常用输入框

<h5>默认搜索框：</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>

输入增强
mui目前提供的输入增强包括：快速删除和语音输入两项功能。要删除输入框中的内容，使用输入法键盘上的删除按键， 只能逐个删除字符，mui提供了快速删除能力，只需要在对应input控件上添加.mui-input-clear类，当input 控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；

另外，为了方便快速输入，mui集成了HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech 类，就会在该控件右侧显示一个语音输入的图标，点击会启用科大讯飞语音输入界面，但是语音输入只能在5+环境 下使用，为了在web环境下不出错，我们可以使用.mui-plus-visible将只能在5+环境下正常使用的内容在web环境 下隐藏，反过来我们可以使用 .mui-plus-hidden将在web中正常显示的内容在5+环境下隐藏。

<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环境下隐藏5+环境下显示">
</div>
<div class="mui-input-row mui-plus-hidden">
 <label>mui-plus-hidden</label>
 <input type="text" class="mui-input-clear" placeholder="我在web环境下显示5+环境下隐藏">
</div>

监听事件

输入框的变化监听事件
通过监听输入框input事件，可以监听到输入框变化。

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

软键盘右下角按键监听事件
为了监听软键盘右下角按键事件，我们常采用下面的方法：

//html
<div class="mui-input-row mui-search">
 <input id="search" type="search" class="mui-input-clear" placeholder="">
</div>
// document.getElementById('search').addEventListener('keydown',function (e) {
    console.log(e.keyCode);
    if(e.keyCode == 13){
     console.log("search");
    }
})

但是这种方法在部分手机软键盘兼容性不好，所以不妨采用绑定form表单提交事件：

//html：
<form action="">
    <input type="text" name="username">
    <button type="submit" class="mui-btn mui-btn-block">保 存</button>
</form>
//js
document.querySelector('form').addEventListener('submit', function(e){
    e.preventDefault(); // 阻止默认事件
    console.log("go");
});

注:通过修改form 表单下input的type属性值为search可以改变软键盘右下角的文字为search。

语音识别完成事件

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

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！