input组件是小程序的内容输入框组件,通常是这样来使用的:

<input type="text" placeholder="输入点内容吧" />

从文档中可以看到,type属性有三个值:text, number,digit。当我们使用这三个属性值,并在微信web开发者工具中查看效果的时候,其实是看不出来有什么差别的。但是如果在真机上进行预览,就能清楚的了解这三个值得功能区别了:

1) text

  • 全键盘模式输入
<input type="text" placeholder="输入文本内容" />
 
全键盘

2) number

  • 纯数字键盘模式输入
<input type="number" placeholder="输入纯数字内容" />
 
纯数字键盘

3) digit

  • 带小数点的数字键盘模式输入
<input type="digit" placeholder="输入可带小数的数字" />
 
带小数点数字键盘
 
关注微信公众号:lovephp

作者:一斤代码
链接:https://www.jianshu.com/p/f44e0d31986b
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

微信小程序 input组件type属性3个值的作用的更多相关文章

  1. 微信小程序 input 的 type属性 text、number、idcard、digit 区别

    微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...

  2. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  3. 微信小程序 input 组件

    输入框:该组件是原生组件,使用的时候要注意相关的设置 属性: value:类型 字符串 输入框的初始内容 type:类型 字符串 input类型 属性值:text 文本输入键盘 number 数字输入 ...

  4. 第十一篇、微信小程序-input组件

    主要属性: 效果图: ml: <!--style的优先级比class高会覆盖和class相同属性--> <!--头像--> <view style="displ ...

  5. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  6. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  7. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

  8. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  9. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

随机推荐

  1. 关于jetty的那些奇葩问题

    Jetty的解压目录并不像Tomcat那样直接是在webapps下,如果你什么都不做修改的话,Ubuntu14.04下Jetty的默认解压目录是/var/cache/jetty/data/下: 比如我 ...

  2. 牛客网Java刷题知识点之基本数据类型参数传递和引用数据类型参数传递图解

    不多说,直接上干货! //基本数据类型参数传递 class Demo { public static void main(String[] args) { ; show(x); System.out. ...

  3. 一个简单的CI分页类

    [php] view plaincopy <span style="font-size:16px;">/** * * 关于 页码有效性的判断需要加在 控制器中判断,即当 ...

  4. java反射-使用反射获取类的所有信息

    在OOP(面向对象)语言中,最重要的一个概念就是:万事万物皆对象. 在java中,类也是一个对象,是java.lang.Class的实例对象,官网称该对象为类的类类型. Class 类的实例表示正在运 ...

  5. java数据结构和算法07(2-3-4树)

    上一篇我们大概了解了红黑树到底是个什么鬼,这篇我们可以看看另外一种树-----2-3-4树,看这个树的名字就觉得很奇怪.... 我们首先要知道这里的2.3.4指的是任意一个节点拥有的子节点个数,所以我 ...

  6. Linux软件相关记录

    Pidgin+lw-web的聊天记录的文件对应的目录为.purple/logs/webqq/你的QQ号码/,进入之后有选择的删除. mkdir -p 递归创建目录:pwd 显示当前目录:cd .. 回 ...

  7. XShell远程连接本地虚机

    有很多朋友在自己电脑上部署完成了虚机,但是不知道怎么去用工具连接自己的虚机,下面给大家讲一下大概的步骤,不足之处敬请指正!! 1.打开我们的虚拟机平台,登录虚机 2.远程那肯定要知道虚机的IP地址,在 ...

  8. System Center Configuration Manager 2016 域准备篇(Part1)

    本系列指南如何从Microsoft安装最新的Configuration Manager基准版本.较新的可用基准版本System Center Configuration Manager(当前分支)版本 ...

  9. int _tmain(int argc, _TCHAR* argv[])

    int _tmain(int argc, _TCHAR* argv[]){ int i; for (i = 0; i<argc; i++) cout<<argv[i]<< ...

  10. PHP与MYSQL结合操作——文章发布系统小项目(实现基本增删查改操作)

    php和mysql在一起几十年了,也是一对老夫老妻了,最近正在对他们的爱情故事进行探讨,并做了一个很简单的小东西——文章发布系统,目的是为了实现mysql对文章的基本增删查改操作 前台展示系统有:文章 ...