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. SQLServer数据库语句大全汇总

    目录清单CONTEXT LIST1.数据库DataBase 1.1数据库建立/删除create/drop database 1.2数据库备份与恢复backup/restore database2.数据 ...

  2. 使用jQuery实现文本框input定位到文字最后(兼容所有浏览器)

    $.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSele ...

  3. 17.NET Core WebApi跨域问题

    官方说明 CORS means Cross-Origin Resource Sharing. Refer What is "Same Origin" Part Detailed P ...

  4. 洛谷 P1281 书的复制

    书的复制 Code: #include <iostream> #include <cstdio> #include <cstring> using namespac ...

  5. LESS CSS非常实用实例应用

    @charset "UTF-8"; @base-color:#333; // 圆角 .border-radius (@radius: 5px) { -webkit-border-r ...

  6. 使用JS实现图片轮播(前后首尾相接)

    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...

  7. C++ int转string / string转int

    c++ 最近标准添加了stringstream类,可以非常简单的对int 和 string 进行相互的转化 //int 转 string void int2str(const int& i, ...

  8. 【Mood-13】Android --如何从初级工程师进化为高级工程师

    一  明确自我定位 现在你是初级工程师,但是你想当个高级工程师,所 以,你就要给自己定个目标,即:我是要成为高级工程师的男人.有了这个定位,并且努力朝着这个目标去努力,然后内心深处就会有一个感觉,这个 ...

  9. ArcGIS 从FileGDB中导出数据异常 000732

    错误代码:000732 产生原因:文件夹命名时起名为“xxx.gdb”,造成是系统识别异常.

  10. [opencv3.2cmake error ] sys/videoio.h no such file or directories

    I don't have /usr/include/sys/videoio.h at all Before that , I have ipp download question. So I down ...