微信小程序input使用

这个input 自己也是花费了2个多小时,熟悉,下面将一一讲解经常使用的里面的属性

value

这个value 就是input中的内容,

如果我们想获取input中输入的内容,value是必须使用的

使用可以在input中定义 value='{{phone}}' 然后在data中初始化就行了,如果写死的input里面就是死的数据

type

type 就很简单了设置输入的类型

主要内容如下

,注意type在模拟器无效,可以在真机中测试使用

password

它的类型是boolean 那么我们使用的时候 password:"true" 或者password:"false" 就行了

placeholder

这个就是占位符, input里面提示的字体,点击输入内容占位符会消失,

placeholder-style

指定样式,假如想改变占位符的样色可以使用如下

placeholder-style="color:#00d8a0"

placeholder-style

改变样式的时候使用

假如想改占位符字体的大小,可以使用如下,

placeholder-class="placeholderStyle"

然后到wxss中

.placeholderStyle{

font-size: 30rpx;

}

这样占位符字体颜色就可以改变了

maxlength

限定input输入内容的大小 ,注意在模拟器无效,可以在真机中测试使用

confirm-type

改变键盘右下角的样式,注意在type="text"才生效

使用的需要注意微信提供了几种类型

加入想变成搜索,可以使用confirm-type="search" 其他设置指定样式即可.

bindinput

也是经常使用,为了获取input输入内容呢,

写一个例子吧如下

xml中内容

<input class="input_coding" placeholder-style="color:#00d8a0" placeholder-class="placeholderStyle" bindinput="phone_num"

value='{{phone}}' confirm-type="search"placeholder='请输入手机号' style='box-shadow: 0 0 1px #00d8a0' type='text' maxlength='11'/>

</view>

js中

data: {

phone:"",

phone_num:function(res){

console.log("====hly======",res)

this.setData({

phone: res.detail.value

})

console.log("============phone==",this.data.phone)

之前有人问为啥res.detail.value就是phone的值,

我写了打印的值

取值就是根据路径来的,

demo地址参考

demo地址如果帮助了您希望给一个star

微信小程序input使用相关推荐

小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序input为数字键盘
微信小程序input为数字键盘微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点 ...
简单实现微信小程序 input 的双向绑定
简单实现微信小程序 input 的双向绑定 data 中定义表单数据 data:{formData:{} } wxml 中,利用 data- 传递参数到逻辑层 <input bindinput= ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
微信小程序 input框进行双向绑定
在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定. 下面有一种思路来解决双向绑定这个思路. 1.利用bindinput记录下inp ...
微信小程序input禁止输入特殊表情符号与空格
微信小程序禁止输入特殊表情符号与空格 1.wxml <view class="childrenAge" wx:if=&quo ...
微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
微信小程序: input输入框placeholder样式的修改
相信大伙在开发微信小程序的时候都会遇到这种问题.因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改.接下来告诉大家怎么修改,该方法仅适用于微信小程序. 一.我们要给pl ...

微信小程序input使用

微信小程序input使用相关推荐

最新文章

热门文章