微信小程序开发初学：输入框

输入框。

input具有的属性

value
类型：String
默认值：无
输入框内的初始内容

type
类型：String
默认值：text
输入内容的类型

type属性的合法值
（1）text：输入文本
（2）number：输入数字（弹出数字键盘）
（3）idcard：输入身份证（弹出身份证输入键盘）

password
类型：boolean
默认值：false
是否为密码类型（输入内容显示为圆点）

placeholder
类型：String
默认值：无
提示词

placeholder-class
类型：String
默认值：input-placeholder
placeholder的样式类

disabled
类型：boolean
默认值：false
input禁用

maxlength
类型：number
默认值：-1
最大输入长度，设置为 -1 的时候不限制最大长度

foucs
类型：boolean
默认值：false
自动聚焦，拉起键盘

cursor-spacing
类型：number
默认值：0
指定光标与键盘的距离

confirm-type
类型：String
默认值：done
设置键盘右下角按钮的文字，仅在 type=“text” 时生效

confirm-type属性的合法值
（1）done：文字为“完成”
（2）search：文字为“搜索”
（3）send：文字为“发送”
（4）next：文字为“下一个”
（5）go：文字为“前往”

示例：

<!--pages/input/input.wxml-->
<view class="input-view"><form bindsubmit="onSubmit"><input class="input1" type="text" ></input><input class="input1" type="number"></input><!--数字输入--><input class="input1" type="idcard"></input><!--身份证输入--><input class="input1" type="text" password></input><!--密码类型，输入隐藏--><input class="input1" type="text"  value="设置了初始值value"></input><input class="input1" placeholder="请输入用户名" placeholder-class="input1-place"></input><!--placeholder 提示词内容  placeholder-class 提示词样式类--><input class="input1" disabled></input><!--disabled 设置是否禁用--><input class="input1" type="idcard" maxlength="18"></input><!--maxlength设置最大输入长度，如输入身份证号最多18位--><input class="input1" foucs></input><input class="input1" foucs cursor-spacing="10px"></input><!--foucs 设置键盘聚焦 cursor-spacing设置输入框与键盘距离--><input class="input1" focus confirm-type="search"></input><!--confirm-type设置键盘右下角按钮内容（需要type="text"才有效）--><button class="btn1" type="primary" form-type="submit">提交</button><!--form表单组件 ，与form-type属性配套使用--></form>
</view>

/* pages/input/input.wxss */
.input1{height: 35px;border: 1px solid black; border-radius: 5px;/*设置边框及圆角*/margin-top: 10px;
}.input1-place{/*placeholder样式类*/color: palevioletred;font-style: italic;
}.btn1{margin-top: 20px;
}

内容参考自小程序API：
https://developers.weixin.qq.com/miniprogram/dev/component/input.html

微信小程序开发初学：输入框 - input相关推荐

uniapp微信小程序开发如何解决input框或者（textarea）框输入时界面被顶起，输入法遮盖输入框的问题？
最近在写微信小程序开发,客服吐槽,点击输入时界面总是被顶起来,输入框也被遮挡了一半,以下是解决方案. 首先将输入框设置为不向上顶页面的参数如下输入框参数 :adjust-position=" ...
微信小程序开发初学：图片组件 - image
image组件用于在小程序中插入图片并对插入的图片进行简单修改.支持 JPG.PNG.SVG.WEBP.GIF 等格式. image具有的属性 src 类型:String 默认值:无图片的网络地址或 ...
微信小程序开发初学：按钮 - button
按钮组件. button具有的属性 type 类型:String 默认值:default 按钮的颜色样式 type属性的合法值 (1)default:默认样式 (2)primary:绿色 (3)war ...
微信小程序开发初学：生命周期函数
生命周期函数用于响应页面动作的事件. onLoad 类型:function 生命周期回调-监听页面加载 onLoad:function(){//页面加载时的事件函数 } onShow 类型:funct ...
input ios问题小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色卸载placeholder-class里面的co ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
微信小程序开发（4）--发布评论
这里我要做的小程序是一个学生信息中心的小程序.所以其中之后难免会有发布评论这一个小部分. 1.输入内容部分设计首先是输入框和按钮设计新建一个page页面,在其中的 .wxml 文件中使用 view ...

微信小程序开发初学：输入框 - input

input具有的属性

微信小程序开发初学：输入框 - input相关推荐

最新文章

热门文章