【input】输入框组件说明
input输入框组件
原型:
<input
value="[String]"
type="[text | number | idcard | digit]"
password="[Boolean]"
placeholder="[String]"
placeholder-style="[String]"
placeholder-class="[String]"
disabled="[Boolean]"
maxlength="[Number]"
cursor-spacing="[Number | String]"
focus="[Boolean]"
confirm-type="[done | send | search | next | go ]"
confirm-hold="[Boolean]"
cursor="[Number]"
selection-start="[Number]"
selection-end="[Number]"
adjust-position="[Boolean]"
bindinput="[EventHandle]"
bindfocus="[EventHandle]"
bindblur="[EventHandle]"
bindconfirm="[EventHandle]" >
</input>
属性:
名称 | 是否必需 | 类型 | 默认值 | 说明 |
value | 否 | [String] | 输入框的初始内容 | |
type | 否 | [text | number | idcard | digit] | text |
输入框输入键盘类型 text 文本输入键盘 number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘 |
password | 否 | [Boolean] | false | 是否是密码类型 |
placeholder | 否 | [String] | 输入框为空时占位符 | |
placeholder-style | 否 | [String] | 指定 placeholder 的样式 | |
placeholder-class | 否 | [String] | input-placeholder | 指定 placeholder 的样式类 |
disabled | 否 | [Boolean] | false | 是否禁用 |
maxlength | 否 | [Number] | 140 | 最大输入长度(设置为-1时不限制最大长度) |
cursor-spacing | 否 | [Number | String] | 0 | 指定光标与键盘的距离,单位px或rpx,默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
focus | 否 | [Boolean] | false | 自动聚焦,拉起键盘 |
confirm-type | 否 | [done | send | go | next | search] | done |
设置键盘右下角按钮的文字,仅在type='text'时生效 send 右下角按钮为“发送” search 右下角按钮为“搜索” next 右下角按钮为“下一个” go 右下角按钮为“前往” done 右下角按钮为“完成” |
confirm-hold | 否 | [Boolean] | false |
点击键盘右下角按钮时是否保持键盘不收起 值为false时,点击键盘右下角按钮时,键盘关闭 值为true时,点击键盘右下角按钮时,键盘仍然存在 |
cursor | 否 | [Number] | 指定focus时的光标位置 | |
selection-start | 否 | [Number] | -1 | 光标起始位置,自动聚集时有效,需与selection-end搭配使用 |
selection-end | 否 | [Number] | -1 | 光标结束位置,自动聚集时有效,需与selection-start搭配使用 |
adjust-position | 否 | [Boolean] | true | 键盘弹起时,是否自动上推页面 |
bindinput | 否 | [EventHandle] | 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。 | |
bindfocus | 否 | [EventHandle] | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 | |
bindblur | 否 | [EventHandle] | 输入框失去焦点时触发,event.detail = {value: value} | |
bindconfirm | 否 | [EventHandle] | 点击完成按钮时触发,event.detail = {value: value} |
示例一:点击按钮获取input组件值
<!-- index.wxml -->
<view>
<input class="weui-input" value="{{inputValue}}" bindinput="setValue" auto-focus placeholder="请输入文本"/>
</view>
<view>
<button bind:tap="getValue">点击获取input组件值</button>
</view>
<!-- index.js -->
Page({
data: {
inputValue: ''
},
setValue(e){
this.setData({
inputValue: e.detail.value
});
},
getValue(){
console.log(this.data.inputValue);
}
})
说明:
第一步将组件input的值与变量{{inputValue}}邦定
第二步通过组件input的input事件,同步更新变量{{inputValue}}值
第三步变量{{inputValue}}的值即是组件的值
【input】输入框组件说明的更多相关文章
- 微信小程序组件解读和分析:十、input输入框
input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...
- 微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期
原来的代码如下: <view class="right"> <picker mode="date" value="{{mat ...
- DateBox( 日期输入框) 组件
本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历). 一. 加载方式//class 加载方式<i ...
- NumberBox( 数值输入框) 组件
本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件.一. 加载方式//class 加载方式<input typ ...
- input输入框的光标定位的问题
input输入框的光标定位的问题 在给input输入框赋值的时候,或者在我之前写模拟下拉框js组件的时候,时不时会碰到光标的小bug问题,比如键盘中的 上移或者下移操作,在浏览器中光标会先移到最前端, ...
- 基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
- 第二百一十九节,jQuery EasyUI,DateTimeBox(日期时间输入框)组件
jQuery EasyUI,DateTimeBox(日期时间输入框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框 ...
- 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件
jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...
- 第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件
jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI ...
随机推荐
- 学生会管理系统(SSM)vue+ssm+shiro
数据库 drop database StudentUnionManagementSystem ; create database StudentUnionManagementSystem CHARAC ...
- 设计模式——责任链(chain of responsibiltiy)
责任链模式在面向对象程式设计里是一种软件设计模式,它包含了一些命令对象和一系列的处理对象. 每一个处理对象决定它能处理哪些命令对象,它也知道如何将它不能处理的命令对象传递给该链中的下一个处理对象.也就 ...
- datagrid和combobox简单应用
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- webservice 从客户端中检测到有潜在危险的 Request.Form 值
webservice中传递xml格式的参数时报错 webservice 从客户端中检测到有潜在危险的 Request.Form 值解决方案: 1.在web.config的system.web节点中添加 ...
- 从C语言的volatile关键字,了解C#的volatile机制(转载)
C#中有一个关键字volatile,一直不太明白到底什么时候才用它,只知道在多线程操作同一个变量的时候要使用volatile关键字,下面看到了一篇C语言关于volatile关键字的介绍,写的很不错,其 ...
- 协议类接口 - LCD
一.引脚含义 下图为某LCD相关引脚: 从引脚可以大概看出其SoC的连接情况: 1)VCLK为时钟,每一次像素就移动一次 2)HSYNC/VLINE 3)VSYNC/VFRAME 4)VD0 - VD ...
- 简易坦克大战python版
#! /usr/bin/env python # -*- coding:utf8 -*- ''' *author:wasua *purpose:学习python语言,其中的类以及pygame应用 ...
- SQL优化例子
如下SQL的优化: select count(*) from ( select id,name,col1,col2 from t1 where name='xxxx' union select id ...
- Python模块、包、异常、文件(案例)
Python模块.包.异常.文件(案例) python.py #模块 # Python中的模块(Module),是一个Python文件,以.py文件结尾,包含了Python对象定义和Python语句, ...
- C# IL DASM 使用-破解c#软件方法
IL DASM反编译工具 使用C#的猿人或多或少都会对微软的IL反编译工具(ildasm.exe)有所认识.我最早接触到这工具是公司同事使用他反编译exe程序,进行研读和修改.感觉他还是很强大. IL ...