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. C# 或与非

    或    ||与    &&非    ! 逻辑或  | 逻辑与  & 逻辑非  ~

  2. Linux Shell 中数组的语法及应用

    #!/bin/sh## 数组的声明与初始化方法# 先声明后赋值:declare -a arrayarray=(one two three) # 声明并初始化:array_1=(1 2 3 four) ...

  3. RAID磁盘分区的创建

    RAID(Reduntant Arrays of Independent Disks),即独立冗余磁盘阵列. RAID的级别: Raid 0: 条带 Raid 1: 镜像 Raid 2,3,4,5 等 ...

  4. mysql双主互备

    mysql主从同步使得数据可以从一个数据库服务器复制到其他服务器上,在复制数据时,一个服务器充当主服务器(master),其余的服务器充当从服务器(slave),备服务器从主服务器同步数据,完成数据的 ...

  5. zookeeper的简单搭建,java使用zk的例子和一些坑

    一 整合 由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的github项目地址 https://github.com/247292980/spring- ...

  6. java环境安装(win7)

    首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-7u13-windows-x64 接下来主要讲怎么配置 java 的环境变量,也是为了以后哪天自己忘记了做个备份 1.进入&qu ...

  7. 浅析System.Console.WriteLine()

    浅析System.Console.WriteLine() Writeline()函数的功能向 StreamWriter 类写入指定字符串和一行字符,共有19个重载,其与Write()函数的主要区别在于 ...

  8. 全栈工程师,也叫全端工程师,英文FullStackdevelopver。是指掌握多种技能,并能利用多种技能独立完成产品的人。

    全栈工程师的发展 在系统全面的大公司,全栈工程师并没有一个稳定的发展职位.我无比赞同知乎那个帖子里面这样的一句话: 一个真正的全栈工程师,目标只有一个:创业. 听起来有些悲凉,但事实就是如此.任何一个 ...

  9. android读写SD卡封装的类

    参考了网上的一些资源代码,FileUtils.java: package com.example.test; import java.io.BufferedInputStream; import ja ...

  10. OAuth相关知识

    什么是OAuth认证 1.一种安全认证的协议;2.协议为用户资源的授权提供了一个安全的.开放又简易的标准;3.OAuth的授权不会使第三方触及到用户的账户信息(例如用户名和密码) 网址:www.oau ...