微信小程序中input输入框组件有什么用

小编给大家分享一下微信小程序中input输入框组件有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

“只有客户发展了,才有我们的生存与发展!”这是创新互联的服务宗旨!把网站当作互联网产品,产品思维更注重全局思维、需求分析和迭代思维,在网站建设中就是为了建设一个不仅审美在线,而且实用性极高的网站。创新互联对成都网站设计、网站制作、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。

input输入框组件说明:

input输入框示例代码运行效果如下:

微信小程序中input输入框组件有什么用

下面是WXML代码:

[XML]


type:有效值:text 感觉没什么区别




password:


placeholder:

disable:


最大长度:



下面是WXSS代码:

[JavaScript]

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 5px;
}
input{
  border:1px red solid;
margin: 5px;
}

下面是WXML代码:

[XML]


bindinput="当内容改变"

bindfocus:当获取焦点

bindblur:当失去焦点触发

内容:

{{log}}

下面是JS代码:

[JavaScript]

Page({
  data:{
    log:'事件触发'
  },
  bindblur:function(e){
    var value=e.detail.value;
    this.setData({
      log:"bindblur失去焦点.输入框值="+value
    })
  },
  bindinput:function(e){
    var value=e.detail.value;
    this.setData({
      log:"bindinput内容改变.输入框值="+value
    })
  },
  bindfocus:function(e){
    var value=e.detail.value;
    this.setData({
      log:"bindfocus获取焦点.输入框值="+value
    })
  }
})

下面是WXSS代码:

[JavaScript]

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 5px;
}
input{
  border:1px red solid;
margin: 5px;
}

组件属性:

属性

描述

类型

默认值

value

输入框的初始内容

String


type

有效值:text, number, idcard, digit

String

text

password

是否是密码类型

Boolean

false

placeholder

输入框为空时占位符

String


placeholder-style

指定 placeholder 的样式

String


placeholder-class

指定 placeholder 的样式类

String

input-placeholder

disabled

是否禁用

Boolean

false

maxlength

最大输入长度, 设置为-1 的时候不限制最大长度

Number

140

auto-focus

自动聚焦,拉起键盘。页面中只能有一个 input 或 textarea标签时, 设置 auto-focus 属性

Boolean

false

focus

获取焦点(当前开发工具暂不支持)

Boolean

false

bindinput

除了date/time类型外的输入框,当键盘输入时,触发input事件,处理函数可以直接 return 一个字符串,将替换输入框的内容。

EventHandle


bindfocus

输入框聚焦时触发event.detail = {value: value}

EventHandle


bindblur

输入框失去焦点时触发event.detail = {value: value}

EventHandle


属性解析:

下面是WXML代码:

[XML]











  等同于  




 等同于 


 等同于 


 等同于 


 等同于 






以上是“微信小程序中input输入框组件有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站题目:微信小程序中input输入框组件有什么用
文章转载:http://scyanting.com/article/jsdjhi.html