详解微信小程序组件:input输入框
input输入框组件说明:
本文介绍input 输入框的各种参数及特性。
input输入框示例代码运行效果如下:
下面是WXML代码:
<view class="content"> type:有效值:text 感觉没什么区别 <input placeholder="type=text" type="text" value="" /> <input placeholder="type=number" type="number" value="" /> <input placeholder="type=idcard" type="idcard" value="" /> <input placeholder="type=digit" type="digit" value="" /> password: <input type="text" password="{{false}}" placeholder="请输入密码"/> <input type="text" password="{{true}}" placeholder="请输入密码"/> placeholder: <input placeholder="占位符" /> disable: <input placeholder="disable={{false}}" disabled='{{false}}'/> <input placeholder="disable={{true}}" disabled='{{true}}'/> 最大长度: <input maxlength="10" placeholder="maxlength='10'最多长度10字符"/> <input maxlength="5" placeholder="maxlength='5'最多长度5字符"/> <input maxlength="-1" placeholder="值为-1,则不限制长度"/> </view>
下面是WXSS代码:
.content{ border:1px black solid; margin: 10px; font-size: 10pt; padding: 5px; } input{ border:1px red solid; margin: 5px; }
事件效果图:
下面是WXML代码:
<view class="content"> bindinput="当内容改变" <input bindinput="bindinput"/> bindfocus:当获取焦点 <input bindfocus="bindfocus"/> bindblur:当失去焦点触发 <input bindblur="bindblur"/> 内容: <view style="color:blue"> {{log}} </view> </view>
下面是JS代码:
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代码:
.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代码:
<!--属性:--> <!--value:输入框内容--> <input value="内容"/> <!--type:有效类型text,number,idcard,digit,小编感觉其他三个和text没有明显区别,不清楚是什么问题,正常number应该只允许输入数字,但结果和text一样--> <input type="text"/> <input type="number"/> <input type="idcard"/> <input type="digit"/> <!--password:密码格式 boolean需要{{}}表示--> <input password="{{true}}"/> <input password/> 等同于 <input password="{{false}}"/> <!--placeholder:占位符,对输入框内容提示--> <input placeholder="占位符" placeholder-class="占位符静态样式" placeholder-style="占位符动态样式,可用{{}}进行动态赋值"/> <!--disabled:控制标签有效,或者失效状态,在失效状态,不能获取该值--> <input disabled="{{true}}"/> <input disabled/> 等同于 <input disabled="{{false}}"/> <!--maxlength:内容长度限制,默认140--> <input maxlength="100"/> <input maxlength/> 等同于 <input maxlength="140"/> <!--focus:初始化时,获取输入焦点(目前开发工具暂不支持)--> <input focus="{{true}}"/> <input focus/> 等同于 <input focus="{{false}}"/> <!--auto-focus:当界面只有一个input,自动获取焦点--> <input auto-focus="{{true}}"/> <input auto-focus/> 等同于 <input auto-focus="{{false}}"/> <!--事件:--> <!--bindinput:当内容改动时触发--> <input bindinput="自己定义函数名"> <!--bindfocus:当获取焦点,可用输入状态时触发--> <input bindfocus="自己定义函数名"> <!--bindblur:当失去焦点触发--> <input bindblur="自己定义函数名">
以上是详解微信小程序组件:input输入框 的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

闲鱼官方微信小程序悄然上线,在小程序中可以发布闲置与买家/卖家私信交流、查看个人资料及订单、搜索物品等,有用好奇闲鱼微信小程序叫什么,现在快来看一下。闲鱼微信小程序叫什么答案:闲鱼,闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能;3、想要使用的话必要要开通微信支付才可以购买;

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码示例。一、前期准备工作在开始编写代码之前,我们需要先下载并安装微信开发者工具,并注册成为微信开发者。同时,还需要了解微信

闲鱼官方微信小程序已经悄然上线,它为用户提供了一个便捷的平台,让你可以轻松地发布和交易闲置物品。在小程序中,你可以与买家或卖家进行私信交流,查看个人资料和订单,以及搜索你想要的物品。那么闲鱼在微信小程序中究竟叫什么呢,这篇教程攻略将为您详细介绍,想要了解的用户们快来跟着本文继续阅读吧!闲鱼微信小程序叫什么答案:闲鱼,闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能;3、

实现微信小程序中的下拉菜单效果,需要具体代码示例随着移动互联网的普及,微信小程序成为了互联网开发的重要一环,越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷,但也需要掌握一定的开发技巧。在微信小程序的开发中,下拉菜单是一个常见的UI组件,实现了更好的用户操作体验。本文将详细介绍如何在微信小程序中实现下拉菜单效果,并提供具

如何使用PHP开发微信小程序的二手交易功能?微信小程序作为一种热门的移动应用开发平台,被越来越多的开发者所使用。在微信小程序中,二手交易是一种常见的功能需求。本文将介绍如何使用PHP开发微信小程序的二手交易功能,并提供具体的代码示例。一、准备工作在开始开发前,需要先确保已具备以下条件:微信小程序的开发环境已搭建完成,包括注册小程序的AppID,并在小程序后台

使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序,具有简单、高效的开发和使用特点。在微信小程序中,实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果,并给出具体的代码示例。首先,在微信小程序的页面文件中,添加一个轮播图组件。例如,可以使用<swiper>标签来实现轮播图的切换效果。在该组件中,可以通过b

实现微信小程序中的图片滤镜效果随着社交媒体应用的流行,人们越来越喜欢在照片中应用滤镜效果,以增强照片的艺术效果和吸引力。在微信小程序中也可以实现图片滤镜效果,为用户提供更多有趣和创造性的照片编辑功能。本文将介绍如何在微信小程序中实现图片滤镜效果,并提供具体的代码示例。首先,我们需要在微信小程序中使用canvas组件来加载和编辑图片。canvas组件可以在页面

实现微信小程序中的图片旋转效果,需要具体代码示例微信小程序是一种轻量级的应用程序,为用户提供了丰富的功能和良好的用户体验。在小程序中,开发者可以利用各种组件和API来实现各种效果。其中,图片旋转效果是一种常见的动画效果,可以为小程序增添趣味性和视觉效果。在微信小程序中实现图片旋转效果,需要使用小程序提供的动画API。下面是一个具体的代码示例,展示了如何在小程
