精华内容
下载资源
问答
  • 主要介绍了微信小程序 input输入框详解及简单实例的相关资料,需要的朋友可以参考下
  • 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>
    
    展开全文
  • 主要介绍了微信小程序 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

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

    万次阅读 2018-10-17 18:44:24
    wxml代码 &lt;view style="border: 1px solid #FFA6A6; border-radius: 10px;"&gt; &lt;textarea placeholder-class="place-holder" placeholder="请从以下四个方面填写求...
    效果图

    在这里插入图片描述

    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
        	});
      	},
    })
    
    展开全文
  • ## 这是自己做的一个自己制定方案的代码。包括了很多的知识点,希望能帮助大家。 WXML文件 <view class="intro" > <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section"&...

    ## 这是自己做的一个自己制定方案的代码。包括了很多的知识点,希望能帮助大家。

    WXML文件

    <view class="intro" >
      <form bindsubmit="formSubmit" bindreset="formReset">
      <view class="section">
        <view class="section__title">方案名称:
        <input bindinput='int' name="name" class='input' placeholder="请备注方案名称" value='{{name}}'/>
        </view>
      </view>
        <view class="hot">
        <view  >光照模式:</view>
        <radio-group class="radio-group" bindchange="radioChange">
          <label class="radio" wx:for="{{items}}">
            <radio value="{{item.name}}" checked="{{item.checked}}" />
            {{item.value}}
          </label>
        </radio-group>
        </view>
          <!-- <view class="section">
            <view class="section__title">时间:
               <input bindinput='time1' name="time1" placeholder="时间"  value='{{time1}}'/>
                <input bindinput='time2' name="time2" placeholder="时间" value='{{time2}}'/>
                 <input bindinput='time3' name="time3" placeholder="时间" value='{{time3}}'/>
                  <input bindinput='time4' name="time4" placeholder="时间" value='{{time4}}'/>
            </view>
          </view> -->
    <view class="section">
      <view class="section__title">换水时间</view>
      <picker mode="time" value="{{time}}" name='time' start="00:00" end="23:59" bindchange="bindTimeChange">
        <view class="picker">
          开始时间: {{time}}
        </view>
      </picker>
       <picker mode="time" value="{{time2}}" name='time2' bindchange="bindTimeChange1">
        <view class="picker">
          结束时间: {{time2}}
        </view>
      </picker>
    </view>
      <view class="weidu">
        <view>温度:</view>
        <slider max='80' min='10' value='{{wtext}}'  block-size='15'backgroundColor='red' activeColor='blue' name="温度" show-value bindchange='wchange'></slider>
      </view>
      <view class="btn-area">
    <button type='primary' bindtap='buttonListener' formType="submit" >提交</button>
      </view>
      </form>
      </view>
    

    JS文件

    Page({
    
      /**
       * 页面的初始数据
       */
    
      data: {
        items: [
          { name: '2', value: '蓝光' },
          { name: '1', value: '蓝紫光' },
          { name: '0', value: '关闭' },
        ],
        id: '',
        wtext: '20',
        gtext: '',
        names: '',
        showView: '',
        time: '11:20',
        time2: '12:20',
      },
      radioChange(e) {
        console.log('radio发生change事件,携带value值为:', e.detail.value);
        var that = this;
        that.setData({
          showView: e.detail.value
        })
      },
    
      bindTimeChange: function (e) {
        console.log('picker111发送选择改变,携带值为', e.detail.value)
        this.setData({
          time: e.detail.value
        })
      },
    
      bindTimeChange1: function (e) {
        console.log('picker222发送选择改变,携带值为', e.detail.value)
        this.setData({
          time2: e.detail.value
        })
      },
      formSubmit: function (e) {
      },
    
      wchange: function (e) {
        this.setData({
          wtext: e.detail.value
        })
      },
      schange: function (e) {
        this.setData({
          stext: e.detail.value
        })
      },
      gchange: function (e) {
    
        this.setData({
          gtext: e.detail.value
        })
      },
      int: function (e) {
        this.setData({
          names: e.detail.value
        })
      },
    
      buttonListener: function () {
    
        var that = this
    
        if (this.data.names == '') {
          wx.showModal({
            title: '方案名称为空',
            content: '请输入方案名称',
            success: function (res) {
            }
          })
        } else if (this.data.showView == '') {
          wx.showModal({
            title: '光照模式没选择',
            content: '请选择光照模式',
          })
        } else if (this.data.time >= this.data.time2) {
    
          wx.showModal({
            title: '请选择正确时间',
            content: '开始时间小于结束时间',
          })
        } else {
          wx.showToast({
    
            title: '保存成功',
    
            icon: 'success',
            duration: 2000,
    
          })
          setTimeout(function () {
            wx.reLaunch({
              url: '../geren/geren',
            })
          }, 1100)
        }
       
    
      },
    
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
      }
    })
    

    WXSS文件

    .btn-area{
      margin-top: 100px;
    
    }
    .intro{
      font-size: 40rpx;
      line-height: 100rpx;
      margin: 30rpx;
    }
    .section__title{
      margin: 0px;
    }
    .input{
      float: right;
      font-size: 35rpx; 
      margin: 0px;
      margin-top: 25rpx;
      margin-right: 80rpx;
    }
    .radio{
      font-size: 35rpx;
    }
    
    展开全文
  • .wxml代码 ``` 输入中文姓名" /> <button type="primary" bindtap="loginBtnClick"> 确认提交 ``` .js代码 ``` loginBtnClick: function () { let name = this.data.MyName if (name == '') { ...
  • 1、微信小程序—-弹幕的实现(无后台) 小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。 效果图:  我的思路是这样的,先用标签确定是否打开弹幕,...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何更改小程序页面中的文本框颜色和边框样式?如何...
  • 在最近的项目里有一个需求,就是需要一个带搜索记录的输入框,但是不需要用到后台,就想到了使用本地缓存setStorageSync。 总结一下需要注意的点: 1、按搜索时间倒序。   unshift:在数组前面插入数据,并改变数组...
  • 微信小程序——好看的文字加输入框(文本框

    千次阅读 多人点赞 2021-03-02 16:02:03
    wxml代码: <view class="view-contain-ti"> <text class="text-ti">账号</text> <input class="input1"></input> </view> wxss代码: .view-contain-ti { display: flex; ...
  • 1.页面效果 2.代码 2.1 wxml文件 2.2 js文件
  • 微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等
  • 代码粘贴出来,希望能帮到有需求的朋友。 上代码: wxml: <view class="conts"> <textarea class="areas" placeholder='订单备注' maxlength="{{orderNoteMax}}" bindinput="inputs"> <text...
  • 本文讲述了微信小程序使用form表单获取输入框数据的实例代码。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({...
  • 主要介绍了微信小程序 行的删除和增加操作实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的,比较常见的地方,如:登录、注册、搜索等。 另外输入框在不同的场景下,也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...
  • 微信小程序搜索框代码组件

    千次阅读 2019-08-24 23:47:55
    search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="sear...
  • 小程序开发组件中使用了文本框组件,鼠标点击无法获取焦点,输不了内容(这里移动端事实上是可以输入的,只是pc端的模拟器输入不了),wxml和js代码如下: &lt;input placeholder="请输入运单号" ...
  • 在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到...
  • 小程序之备忘录开发的源码,微信的react的特性使它很适合用来开发这种单机版简单交互的备忘录。在本示例中,初始时页面只有一个简简单单的欢迎词和文本框,当聚焦文本框开始输入文字,下方出现提交及重置按钮,默认...
  • 本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下 效果图: 主要利用小程序的getStorage来实现异步本地储存。 小程序目录结构如下: 新建项目前,为了简化操作可直接...
  • wxml <view class='suggest_title'>请输入你想反馈的问题</view> <view class='suggest_box'>...textarea class='suggest_text' bindinput="bindText" maxlength='200' placeholder='我们有什么...
  • 微信小程序最基本代码入门

    万次阅读 多人点赞 2018-07-23 11:30:29
    微信小程序的简单实现 小程序是最近十分受欢迎的一项创新,因其简单方便,不需要大内存下载。随进随用。所以小程序和小游戏的用户日益剧增。小程序之所以如此受欢迎,是因为它符合现代人的生活,不用巨大的安装包...
  • 参考链接:小程序中如何使用Emoji表情 - Jo太郎 - 博客园 如何使用: index.js // index.js // 获取应用实例 const app = getApp() Page({ data: { emoji: '☀-☔-????-????', emojiArr: ['01', '02', '03',...
  • 微信小程序 快递查询功能: 产品需求, 准备api, 代码编写。  第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息 第二步:准备 我们先找一个快递的...
  • 微信小程序中文本框添加空格

    千次阅读 2018-09-17 18:10:00
    代码 姓 名: 通过在text标签中 引用样式space=”ensp”进行空格
  • 可以通过拖动地图,搜索地址,选择地址,并将地址值传给文本框 进入以下界面 点击确定后。 代码如下: wxml: 收货地址 <input type=text class=box2_right placeholder=请选择收货地址 bindtap=...
  •  这个日记本程序,运行于微信小程序环境,支持日记聚合,加载Loading、tab项事件、预览模式、右上角工具栏、图片预览和多媒体预览模式等众多辅助功能,可从中学习到一些实用的微信小程序开发技巧。
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何制作一个文本框,并改变其在页面所处位置?如何...

空空如也

空空如也

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

微信小程序文本框代码

微信小程序 订阅