首页 > 建站教程 > APP开发,混合APP >  mui input输入表单详解正文

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

上一篇: mui获取APP版本
下一篇: mui组件JS API