精华内容
下载资源
问答
  • bindblur:离开文本框时出发 代码实例 //bindinput:输入一个字节一触发 <input name="toname" class="value" value="{{userInfo.nickName}}" bindinput="setToName"></input> //bindblur:离开时出发 &...

    bindinput:输入一个字节一触发
    bindblur:离开文本框时出发

    代码实例

    //bindinput:输入一个字节一触发
    <input name="toname" class="value" value="{{userInfo.nickName}}" bindinput="setToName"></input>
    //bindblur:离开时出发
    <input name="toname" class="value" value="{{userInfo.nickName}}" bindblur="setToName"></input>
    
    展开全文
  • 一个很简单的功能实现,先看效果界面。...新建一个小程序,建立普通快速启动模板。 所有东西都不用动, pages/index/index.wxml代码用如下的替换:<form bindsubmit="formBindsubmit" bindreset="formRese

    一个很简单的功能实现,先看效果界面。
    这里写图片描述

    小程序初始界面如1,输入用户名“你是大坏蛋”,密码“wocaibushine”,点击登录效果如2所示,点击重置,效果如3所示。
    新建一个小程序,建立普通快速启动模板。
    所有东西都不用动,
    pages/index/index.wxml代码用如下的替换:

    <form bindsubmit="formBindsubmit" bindreset="formReset">
      <view style="display:flex;">
        <label>用户名:</label>
        <input name="userName" placeholder="请输入用户名!" />
      </view>
      <view style="display:flex;">
        <label>密码:</label>
        <input name="psw" placeholder="请输入密码!" password="true" />
      </view>
      <view style="display:flex;margin-top:30px;">
        <button style="width:30%;" formType="submit" >登录</button>
        <button style="width:30%" formType="reset" >重置</button>
      </view>
    </form>
    <view>{{tip}}</view>
    <view>{{userName}}</view>
    <view>{{psw}}</view>
    

    pages/index/index.js代码用如下的替换:

    Page({
      data: {
        // text:"这是一个页面"
        tip: '测试',
        userName: '用户名:',
        psw: '密码:'
      },
      formBindsubmit: function (e) {
        this.setData({
          tip: '结果',
          userName: '用户名:' + e.detail.value.userName,
          psw: '密码:' + e.detail.value.psw
        })
      },
      formReset: function () {
        this.setData({
          tip: '清空了',
          userName: '君不见',
          psw: '黄河之水天上来'
        })
      }
    })
    

    分析一下这两个代码。
    首先是wxml,第一行,因为文本框input和按钮button都是放在了表单(form)中,所以这个首行代码几乎是固定的了。

    <form bindsubmit="formBindsubmit" bindreset="formReset">

    bindsubmit,数据触发,bindreset表单重置。
    style=”display:flex;,一行多列,把这个删掉,“用户名:”和“请输入用户名”就是两行。
    password,true是隐藏密码,false是不隐藏密码。
    margin-top,对象上面空出多少,30px。
    formType:点击button的时候触发form组件中的事件,只有两个有效值,要么submit,要么reset。
    所以说,button和input在form组件中,用法固定而单一,代码都没有什么变量。
    最后,”“调用的是函数,{{}}引用的是值。

    再说js文件。
    代码都要写在page({})中。
    data:{}给个初始化的值。
    this.Data({})这也是个固定的,定义函数更新data的数据。
    数据结构是json格式的。
    formBindsubmit: function (e){}:定义表单中的submit函数,提交表单。
    formReset: function () {}:定义表单中的reset函数,重置表单。


    小程序中input和button的用法挺固定的,照着源码化用就行了。

    input和button在小程序中归为表单组件。
    input的官方文档
    https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html
    button的官方文档,放在了表单组件里了,
    https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html

    展开全文
  • <!--pages/index29/index29.wxml--> <page> <view class="conts">...textarea class="areas" placeholder='个性签名' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs">...
    <!--pages/index29/index29.wxml-->
    <page>
    <view class="conts">
    <textarea class="areas" placeholder='个性签名' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs">
    <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text>
    <text class="hint">{{texts}}</text>
    </textarea>
    </view>
    </page>
    // pages/index29/index29.js
    Page({

    /**
    * 页面的初始数据
    */
    data: {
    texts: "至少5个字",
    min: 5,//最少字数
    max: 30, //最多字数 (根据自己需求改变)
    },

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function(options) {

    },

    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function() {

    },

    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function() {

    },

    /**
    * 生命周期函数--监听页面隐藏
    */
    onHide: function() {

    },

    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function() {

    },

    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function() {

    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function() {

    },

    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function() {

    },
    inputs: function (e) {
    // 获取输入框的内容
    var value = e.detail.value;
    // 获取输入框内容的长度
    var len = parseInt(value.length);

    //最少字数限制
    if (len <= this.data.min)
    this.setData({
    texts: "最低五个字"
    })
    else if (len > this.data.min)
    this.setData({
    texts: " "
    })

    //最多字数限制
    if (len > this.data.max) return;
    // 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行
    this.setData({
    currentWordNumber: len //当前字数
    });
    }

    })
    /* pages/index29/index29.wxss */

    page {
    width: 750rpx;
    background: #F2F2F2;
    }

    page .conts {
    width: 750rpx;
    height: auto;
    border: 1rpx soldi red;
    margin-top: 30rpx;
    }

    page .areas {
    width: 750rpx;
    height: 220rpx;
    background: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    text-indent: 28rpx;
    border: 1rpx solid gainsboro;
    margin-top: 30rpx;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    }

    page .currentWordNumber {
    font-size: 28rpx;
    color: gray;
    position: absolute;
    left: 600rpx;
    top: 160rpx;
    }

    page .hint {
    font-size: 28rpx;
    position: absolute;
    top: 165rpx;
    left: 0rpx;
    color: #f60;
    }

    转载于:https://www.cnblogs.com/ylblogs/p/9566472.html

    展开全文
  • 微信小程序文本框限制输入字数

    万次阅读 2018-10-17 18:44:24
    // 文本框字数限制 limit: function (e) { var value = e.detail.value; var length = parseInt(value.length); if (length > this.data.noteMaxLen) { return; } this.setData({ current: ...
    效果图

    在这里插入图片描述

    wxml代码
    <view style="border: 1px solid #FFA6A6; border-radius: 10px;">
         <textarea placeholder-class="place-holder"  placeholder="请从以下四个方面填写求求职简介 1. 教育背景介绍,如学校专业描述、个人学习成绩奖学金情况  2. 技能介绍(多描述就业相关技能),培训证书等  3. 描述实习经历、社会实践经历,或者社团经历 4. 希望从事的领域及职位 " name="introduction" maxlength='300' bindinput='limit' value="{{text}}" style="font-size: 14px;"/>
    
          <!-- 显示字数 -->
          <view class="clear"><text style="color: #ccc; font-size: 14px; float: right; margin-right: 2%;">{{current}} / {{max}} (最多可写300字)</text></view>
    </view>
    
    js代码:
    Page({
    	data: {
    		// 字数限制
       		current: 0,
        	max: 300,
    	},
    	 // 文本框字数限制
      	limit: function (e)  {
        	var value = e.detail.value;
        	var length = parseInt(value.length);
    
       	 if  (length > this.data.noteMaxLen) {
          	return;
       	 }
    
        	this.setData({
          	current: length
        	});
      	},
    })
    
    展开全文
  • 微信小程序中 textarea 组件的层级过高如何解决 前言:这篇文章对谁有用 微信小程序开发者 前言:本文有什么用? 提供解决问题的思路,供你参考 (因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴...
  • 微信小程序自动完成文本框autocompletetext 仅供参考!!!!!!
  • ## 这是自己做的一个自己制定方案的代码。包括了很多的知识点,希望能帮助大家。 WXML文件 <view class="intro" > <form bindsubmit="formSubmit" bindreset="formReset"> ...view class="section">...
  • 该资源是本人所总结,其中包括有微信小程序前台代码和后台代码,还有一些文档帮助学习。
  • inputNum: function (e) { return this.checkInputText(e.detail.value); }, //检查输入文本,限制只能为数字并且数字最多带2位小数 checkInputText: function (text) { var reg = /^(\.*)(\d+)(\.?...
  • 如图: .wxml代码 ``` 输入中文姓名" /> <button type="primary" bindtap="loginBtnClick"> 确认提交 ``` .js代码 ``` ...运行一直判断MyName为空,明明填写值也会进入判断,求指教
  • 主要介绍了微信小程序 input输入框详解及简单实例的相关资料,需要的朋友可以参考下
  •     wxml 1 &lt;view class='textarea-count'&gt; 2 &lt;textarea placeholder='请输入文字' bindinput="getWords" maxlength='{{maxTextLen}}'&...view class='text-count-disp...
  • 1.页面效果 2.代码 2.1 wxml文件 2.2 js文件
  • wxml <view class='suggest_title'>请输入你想反馈的问题</view> <view class='suggest_box'>...textarea class='suggest_text' bindinput="bindText" maxlength='200' placeholder='我们有什么...
  • 主要介绍了微信小程序 input输入框控件详解及实例(多种示例)的相关资料,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,需要的朋友可以参考下
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何更改小程序页面中的文本框颜色和边框样式?如何...
  • 主要介绍了微信小程序实现提交input信息到后台的方法,结合实例形式分析了微信小程序提交input信息到后台相关事件响应与数据处理操作技巧,需要的朋友可以参考下
  • 主要介绍了微信小程序点击按钮动态切换input的disabled禁用/启用状态功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了微信小程序表单验证form提交错误提示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序input框中加入小图标的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序输入框输入换行

    千次阅读 2020-06-16 15:46:53
    最近在做微信小程序项目的测试,因为输入框中输入换行的问题导致项目上线后出现bug。         具体情况是,在某些文本输入框中,我想到了测试输入换行是否能提交成功,测试...
  • 微信小程序6位支付密码输入框 component为6位支付输入框组件 index为引用组件的页面 具体参数和事件设置,请参考小程序官方文档-组件 ➢ 参数设置 ➢ 代码片段地址(新增明文/暗文切换) 代码片段地址:wechatide://...
  • 微信小程序——好看的文字加输入框(文本框

    千次阅读 多人点赞 2021-03-02 16:02:03
    效果图: wxml代码: <view class="view-contain-ti"> <text class="text-ti">账号</text> <input class="input1"></input> </view>... border: 3rpx soli
  • 最近在学习微信小程序云开发时做一个数据库的增操作,当中遇到了一个小问题,在这做一个记录,方便大家不要像我一样踩坑
  • 仿照Android上的AutoCompleteTextView(自动完成文本框)控件效果,在微信小程序上做的简易Demo,复杂功能需自行扩展和改造匹配规则,这里只是提供思路。 下载只要1分,尊重一下劳动成果! 没有分或者实在不想给分的小...
  • 微信小程序中的表单要进行验证,可以使用第三方插件:WxValidate.js。该插件约有12.8KB左右,采用ES6中class类的方式进行编写,所定义的类名为WxValidate,并最终将该类导出。本文将详细讲解WxValidate.js插
  • 适配结,关键词: 媒体查询 1) 媒体查询 利用设备像素比缩放,设置小数像素;css与js写法任选其一 css写法 js写法 优点:简单,好理解 缺点:兼容性差,目前之余IOS8+才支持,在IOS7及其以下、安卓系统都是显示...
  • 解决方案: 输入框设置 always-embed <input placeholder="请输入" always-embed="{{true}}" value="{{waterTreatment}}" type="digit" bindblur="bindInputChange"></input>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,112
精华内容 1,644
关键字:

微信小程序文本框

微信小程序 订阅