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>

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

猜你喜欢