MUI-ipnut (表單)，快速刪除、語音輸入、密碼框顯示&隱藏
阿新 • • 發佈：2018-12-28
所有包裹在.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> <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> <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>