博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MUI框架之输入框Input
阅读量:6070 次
发布时间:2019-06-20

本文共 1136 字,大约阅读时间需要 3 分钟。

input输入框的官方api文档:

一、输入框类型

输入框的类型是根据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>

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

     

 

转载地址:http://thygx.baihongyu.com/

你可能感兴趣的文章
3.使用maven创建java web项目
查看>>
笔记本搜索不到某一AP广播的SSID,信道的原因
查看>>
基于Spring MVC的异常处理及日志管理
查看>>
MediaBrowserService 音乐播放项目《IT蓝豹》
查看>>
MySQL入门12-数据类型
查看>>
Windows Azure 保留已存在的虚拟网络外网IP(云服务)
查看>>
修改字符集
查看>>
HackTheGame 攻略 - 第四关
查看>>
js删除数组元素
查看>>
带空格文件名的处理(find xargs grep ..etc)
查看>>
华为Access、Hybrid和Trunk的区别和设置
查看>>
centos使用docker下安装mysql并配置、nginx
查看>>
关于HTML5的理解
查看>>
需要学的东西
查看>>
Internet Message Access Protocol --- IMAP协议
查看>>
Linux 获取文件夹下的所有文件
查看>>
对 Sea.js 进行配置(一) seajs.config
查看>>
dom4j解析xml文件
查看>>
第六周
查看>>
斯坦福大学公开课机器学习:梯度下降运算的学习率a(gradient descent in practice 2:learning rate alpha)...
查看>>