MUI框架之输入框Input

简介: input输入框的官方api文档:http://dev.dcloud.net.cn/mui/ui/#input 一、输入框类型 输入框的类型是根据type来决定是普通输入框还是密码框,搜索框等类型 <label>帐号</label> <input id="mess" class="mui-inpu.

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

一、输入框类型

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

  1. 帐号
  2.  id="mess" class="mui-input-clear" type="text" placeholder="请输入帐号">
  3. 密码
  4.  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>

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

Simulator Screen Shot 2016年9月23日 上午12.08.03.png

点击查看原图

     Simulator Screen Shot 2016年9月23日 上午12.08.13.png

 

 

 

本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/7465410.html,如需转载请自行联系原作者

相关文章
|
缓存 小程序 JavaScript
4.1【微信小程序全栈开发课程】个人中心(一)--页面样式、用户信息展示
第四章,我们来完善个人中心,主要操作是src/pages/me文件夹中的me.vue文件,先看看个人中心页面的效果:
1822 0
4.1【微信小程序全栈开发课程】个人中心(一)--页面样式、用户信息展示
|
数据库 数据安全/隐私保护 数据库管理
|
Android开发
Android开发教程 - 使用Data Binding(七)使用BindingAdapter简化图片加载
本系列目录 使用Data Binding(一)介绍 使用Data Binding(二)集成与配置 使用Data Binding(三)在Activity中的使用 使用Data Binding(四)在Fragment中的使用 ...
1277 0
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
493 0
Next.js 实战 (四):i18n 国际化的最优方案实践
|
8月前
|
机器学习/深度学习 人工智能 算法
AI在体育分析与预测中的深度应用:变革体育界的智能力量
AI在体育分析与预测中的深度应用:变革体育界的智能力量
668 31
|
测试技术
Jmeter四大随机数(一):${__Random(,,)}
Jmeter四大随机数:Random、RandomDate、RandomString和RandomFromMultipleVars在接口性能测试过程,我们经常需要用不重复的参数。Jmeter提供的随机数函数很好的解决我们难题。
|
JavaScript
Vue3文字滚动(TextScroll)
这是一个可定制的文字滚动组件,支持水平和垂直滚动。主要属性包括滚动文字数组 `scrollText`、是否启用单条文字滚动 `single`、滚动区域宽高 `width` 和 `height`、滚动区域和文字样式 `boardStyle` 和 `textStyle`、滚动条数 `amount`、间距 `gap`、动画间隔 `interval` 和 `step`、以及垂直滚动时间间隔 `verticalInterval`。组件内置多种样式调整功能,并提供在线预览示例。
424 0
Vue3文字滚动(TextScroll)
|
存储 Unix Linux
在Linux中,inode是什么?
在Linux中,inode是什么?
|
运维 安全 Linux
使用docker自建rustdesk服务器
docker自建rustdesk服务器
13404 0
|
SQL Java 数据库连接
IDEA插件(MyBatis Log Free)
IDEA插件(MyBatis Log Free)
843 0