微信小程序输入框input-创新互联

微信小程序输入框input

10年积累的网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有西市免费网站建设让你可以放心的选择与我们合作。

属性名 类型 默认值 说明

value String 输入框的内容

type String text input的类型，有效值：text,number,idcard,digit,time,date

password Boolean false 是否是密码类型

placeholder String 输入框为空时占位符

placeholder-style String 指定placeholder的样式

placeholder-class String input-placeholder 指定placeholder的样式类

disabled Boolean false 是否禁用

maxlength Number 140 大输入长度，设置为0的时候不限制大长度

auto-focus Boolean false 自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性

focus Boolean false 使得input获取焦点

bindchange EventHandle 输入框失去焦点时，触发bindchange事件，event.detail={value:value}

bindinput EventHandle 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。

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

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

<!--input.wxml-->

<view class="section">

  <input placeholder="这是一个可以自动聚焦的input" auto-focus/>

</view>

<view class="section">

  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="`focus`" />

  <view class="btn-area">

    <button bindtap="bindButtonTap">使得输入框获取焦点</button>

  </view>

</view>

<view class="section">

  <input  maxlength="10" placeholder="大输入长度10" />

</view>

<view class="section">

  <view class="section__title">你输入的是：`inputValue`</view>

  <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>

</view>

<view class="section">

  <input  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />

</view>

<view class="section">

  <input  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />

</view>

<view class="section">

  <input type="emoji" placeholder="这是一个带有表情的输入框" />

</view>

<view class="section">

  <input password type="number" />

</view>

<view class="section">

  <input password type="text" />

</view>

<view class="section">

  <input type="digit" placeholder="带小数点的数字键盘"/>

</view>

<view class="section">

  <input type="idcard" placeholder="×××输入键盘" />

</view>

<view class="section">

  <input placeholder- placeholder="占位符字体是红色的" />

</view>

//input.js

Page({

 data:{

  focus:false,

  inputValue:""

 },

 bindButtonTap:function(){

  this.setData({

   focus:Date.now()

  })

 },

 bindKeyInput:function(e){

  this.setData({

   inputValue:e.detail.value

  })

 },

 bindReplaceInput:function(e){

  var value = e.detail.value;

  var pos = e.detail.cursor;

  if(pos != -1){

   //光标在中间

   var left = e.detail.value.slice(0,pos);

   //计算光标的位置

   pos = left.replace(/11/g,'2').length;

  }

  //直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置

  return {

   value:value.replace(/11/g,'2'),

   cursor:pos

  }

  //或者直接返回字符串,光标在最后边

  //return value.replace(/11/g,'2'),

 },

 bindHideKeyboard:function(e){

  if(e.detail.value === "123"){

   //收起键盘

   wx.hideKeyboard();

  }

 }

})

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前标题：微信小程序输入框input-创新互联
文章起源：https://www.cdcxhl.com/article22/dgcpjc.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、品牌网站制作、网站导航、网站设计、App设计、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联