MUI框架之输入框Input

input输入框的官方api文档:http://dev.dcloud.net.cn/mui/ui/#input

一、输入框类型

输入框的类型是根据type来决定是普通输入框还是密码框,搜索框等类型

  1. <label>帐号</label>
  2. <input id="mess" class="mui-input-clear" type="text" placeholder="请输入帐号">
  3. <label>密码</label>
  4. <input type="password" class="mui-input-clear" name="pass" placeholder="请输入密码" />

而id是可以用来获取该输入框,或者使用class来批量获取。

二、输入框内容获取

1、比如这个帐号输入框,可以使用id来获取内容

  1. document.getElementById("mess").value;

2、当然因为他是第一个,所以也可以使用document的方法来获取

  1. document.querySelector(".mui-input-clear").value

3、或者使用mui()加class来获取组,通过获得的array来获取

  1. mui("input.mui-input-clear")[0].value
  2. //或者下面这个方法
  3. mui(".mui-input-clear")[0].value

这个区别就是一个是获取的input的所有包含mui-input-clear类型的,一个是所有的mui-input-clear类型的,可以查看官方文档的mui()的说明

三、输入框内容操作

获取了输入框内容,这里最简单的就是模拟一个登录,按钮绑定一个函数

  1. <button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="sss()">登录</button>

在button的sss方法中可以这么写

  1. <script type="text/javascript">
  2. function sss () {
  3. var m = mui(".mui-input-clear");
  4. var uncomplete = false;
  5. mui.each(m,function (index,item) {
  6. console.log(item.value);
  7. if (!item.value||item.value.trim() == "") {
  8. uncomplete = true;
  9. }
  10. });
  11. if (uncomplete) {
  12. mui.toast("请填写信息");
  13. } else{
  14. mui.toast("登录成功");
  15. }
  16. }
  17. </script>

这样如果没有填写就会弹出了没有弹出信息的提醒了

点击查看原图

时间: 2024-11-05 09:45:59

MUI框架之输入框Input的相关文章

移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class="mui-content"> <input .../> </div> 注意:在有些情况下不适用,当把input标签放入mui-scroll中就不行了,也就是说mui-content和mui-scroll同时存在时不适用 <div class="mui-c

【MUI框架】学习笔记整理 Day 1

MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 1 <ul class="mui-table-view"> 2 <li class="mui-table-view-cell mui-collapse"> 3 <a class="mui-navigate-right" href="#"></a> 4 <div class="m

MUI 框架微信支付

在MUI 框架中实现了支付宝支付后,以为MUI微信支付,也没什么大问题,结果这个问题困扰了我几天,后面再同事的提醒下终于弄出来了, 问题出在,开始使用Dcloud 公有证书 怎么也付不了....,后面改成自己就OK了....希望后来者看到此博,能节约一点时间. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" co

使用mui框架后a标签无法跳转

由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添加点击事件,但效果依然是无法跳转,查资料发现mui搞得鬼: 我的代码主要是下边代码搞得鬼: //删除出行人  mui('body').on('tap','.business_icon_remove',function(){    var parentNode_1 = this.parentNode,     

mui框架中底部导航的跳转1

mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳转, 为了让我们通过触摸下面的导航之后,把相对应的子页面加载到首页的内容区在index.html 下写: 地不连接为 让为了让内容在首页窗体内显示,我们还需要写下面的代码: 这里要注意的是其他页面上要有内容不然看不出来,必须是真机测试才能看出效果

MUI框架

Hbuilder中敲mheader生成的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭当前页面,原因就是因为该返回箭头包含.mui-action-back类,代码如下: <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class=&

bootstrap-表单控件——输入框input

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--输入框input</title>     <!-- 最新

微信小程序获取输入框(input)内容

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /

MUI框架-01-介绍-创建项目-简单页面

MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问题? MUI 官方号称最接近原生APP体验的高性能前端框架 简单的说就是webapp的以个开发框架 webapp和原生app性能及体验的差距,一直是移动app开发者放弃HTML5的首要原因. 浏览器天生的切页白屏.不忍直视的转页动画.浮动元素的抖动.无法流畅下拉刷新等问题,这些都让HTML5开发者倍