MUI-ipnut (表单)，快速删除、语音输入、密码框显示&隐藏

71 阅读 0 评论 47 点赞

我是靠谱客的博主自觉毛衣，最近开发中收集的这篇文章主要介绍MUI-ipnut (表单)，快速删除、语音输入、密码框显示&隐藏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。

将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列，如下：

<form class="mui-input-group" id="input_example">
<div class="mui-input-row">
<label>用户名：</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码：</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" id="btn1" 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>

1、【快速删除】：只需要在input控件上添加.mui-input-clear类，当input 控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；

2、【语音输入】：只需要在对应input控件上添加.mui-input-speech 类，就可以在5+环境下使用语音输入

3、【密码框】：给input元素添加.mui-input-password类即可使用

4、【搜索框】：在.mui-input-row同级添加.mui-input-search 类，就可以使用search控件

5、验证表单是否为空。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
<style>
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">ipnut (表单)</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form class="mui-input-group" id="input_example">
<div class="mui-input-row">
<label>用户名：</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码：</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-input-row">
<label>语音：</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button type="button" id="btn1" 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>
<div class="mui-input-row mui-search" style="margin: 10px;">
<input type="search" class="mui-input-clear" placeholder="请输入内容">
</div>
<div class="mui-input-row">
<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
swipeBack: true //启用右滑关闭功能
});
mui('body').on('tap', '#btn1', function() {
mui("#input_example input").each(function() {
//若当前input为空，则alert提醒
if (!this.value || this.value.trim() == "") {
var label = this.previousElementSibling;
mui.alert(label.innerText + "不允许为空");
check = false;
return false;
} else {
check = true;
}
}); //校验通过，继续执行业务逻辑
if (check) {
mui.alert('验证通过!')
}
});
</script>
</body>
</html>