微信小程序 input组件type属性3个值的作用
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="输入可带小数的数字" />

作者:一斤代码
链接:https://www.jianshu.com/p/f44e0d31986b
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
微信小程序 input组件type属性3个值的作用的更多相关文章
- 微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 微信小程序 input 组件
输入框:该组件是原生组件,使用的时候要注意相关的设置 属性: value:类型 字符串 输入框的初始内容 type:类型 字符串 input类型 属性值:text 文本输入键盘 number 数字输入 ...
- 第十一篇、微信小程序-input组件
主要属性: 效果图: ml: <!--style的优先级比class高会覆盖和class相同属性--> <!--头像--> <view style="displ ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- 小程序input组件获得焦点时placeholder内容有重影
这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
随机推荐
- SQLServer数据库语句大全汇总
目录清单CONTEXT LIST1.数据库DataBase 1.1数据库建立/删除create/drop database 1.2数据库备份与恢复backup/restore database2.数据 ...
- 使用jQuery实现文本框input定位到文字最后(兼容所有浏览器)
$.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSele ...
- 17.NET Core WebApi跨域问题
官方说明 CORS means Cross-Origin Resource Sharing. Refer What is "Same Origin" Part Detailed P ...
- 洛谷 P1281 书的复制
书的复制 Code: #include <iostream> #include <cstdio> #include <cstring> using namespac ...
- LESS CSS非常实用实例应用
@charset "UTF-8"; @base-color:#333; // 圆角 .border-radius (@radius: 5px) { -webkit-border-r ...
- 使用JS实现图片轮播(前后首尾相接)
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
- C++ int转string / string转int
c++ 最近标准添加了stringstream类,可以非常简单的对int 和 string 进行相互的转化 //int 转 string void int2str(const int& i, ...
- 【Mood-13】Android --如何从初级工程师进化为高级工程师
一 明确自我定位 现在你是初级工程师,但是你想当个高级工程师,所 以,你就要给自己定个目标,即:我是要成为高级工程师的男人.有了这个定位,并且努力朝着这个目标去努力,然后内心深处就会有一个感觉,这个 ...
- ArcGIS 从FileGDB中导出数据异常 000732
错误代码:000732 产生原因:文件夹命名时起名为“xxx.gdb”,造成是系统识别异常.
- [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 ...