微信小程序获取input

最新推荐文章于 2023-11-02 23:02:25 发布
最新推荐文章于 2023-11-02 23:02:25 发布
阅读量434 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 小程序 文章标签： 微信小程序获取input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/servicesYY/article/details/80625305

首先给input添加事件

<view class="field clearfix">

<input id="name" name="Phone" class="login-input" type="text" placeholder="请输入手机号" bindinput="getPhone"/>

</view>


//添加bindinput="getPhone"


data: {
Phone:1,
},

//获取用户输入的用户名
getPhone: function (e) {
this.setData({
Phone: e.detail.value
})
},


接下来就是把获取到的值写入data的phone

微信小程序 - Setting data field “xxx“ to undefined is invalid.报错原因及解决方案
资深程序员
10-31 2万+
前言 ##完整报错(SEO) ##翻译:将数据字段“XXX”设置为未定义是无效的。 Settingdatafield"xxx"toundefinedisinvalid. 这种情况是由于页面setData"xxx（变量）"的时候，没有获取到值。 然后就会将undefined给xxx（变量）字段，此时默认字段就会变成undefined，那么就会出现这种警告。 解决 判断是否存在。 在没有setData之前，先判断获取到的值是否存在（也可以setData里面判
微信小程序获取input框的值并进行传参
刺心的博客
06-11 1万+
话不多说，直接上代码 wxml： <view class="itemView">用户名： <input class="input" name="userName" placeholder="请输入用户名" bindinput="userNameInput" /> </view> <view class="itemView">密 码： <...
微信小程序input如何清空？
qq_31594665的博客
11-02 2590
不需要设置重置属性，只需要在input中设置属性value。<type="text" name='name' value="{{name}}"/> 然后表单提交，在成功返回函数success中设置。这样就每次提交后都会把输入框的内容清空了。：可以用一个最简单的方法。
微信小程序input输入框校验手机号输入错误
qq_46199553的博客
09-07 2618
input输入框错误提示
微信小程序开发——文本框种输入手机号，点击获取验证码无反应的处理方法...
weixin_30920853的博客
05-27 4414
异常描述： 如下图，输入手机号码之后，点击右侧的获取验证码，在开发工具是OK的，真机测试无反应： 页面编码跟H5差不多的，H5没出现这个问题，但是小程序就不一样了。 异常分析： 页面结构层面，为了方便样式排版，手机号码输入框跟验证码输入框是一样宽的，获取验证码的层以绝对定位的方式固定在手机号码输入框的右边，如下： 对于H5来说，这个并没有什么影响，但是小程序中，这种排版，就不行了...
小程序：Setting data field “xxxx“ to undefined is invalid.
qq_34276316的博客
05-17 3044
出现这种情况的时候是页面setData的时候，没有获取到值，然后就会将undefined给setData字段，此时默认字段就会变成undefined。
微信小程序获取input里面的内容，动态的加载数据，随机字符串产生函数 时间戳
03-29
分享者：冉然，来自原文地址   一：随机字符串产生函数 时间戳产生函数 随机函数的产生： ...微信小程序刚出来有很多的东西还在更新，先写些刚开始要做的工作 1、首先要写在js里定义一个全局变量   data: { dat
微信小程序获取input当中的value值
m0_53912016的博客
03-23 3833
获取value的值 本来吧打算归于常见效果，但是发现这个对我印象很深刻，就单独挑出来 废话不多说直接上代码 效果图 代码 wxml <view class="main"> <view> <input maxlength="7" type="text" bindinput='btnValue' placeholder="请输入内容" value="{{inputvalue}}" /></view>
微信小程序获取Input框内的值，将多条数据存储在json中
document_write的博客
08-15 2587
一.wxml <view class="content"> <view class="adresss"> <view class="row"> <view class="sign">姓名</view> <input placeholder="收货人姓名" bindinput=...
微信小程序修改自定义input
03-29
在微信小程序中是不能修改input样式的 甚至修改大小也不能，那么怎么做一个自定义样式的input呢 说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事件bindtap...
微信小程序input控件
Dax1_的博客
09-25 2411
首先主页面中将登录的样式进行了简单展示和使用，代码如下： <!--如果在同一个form表单中创建了多个input输入框，可以给给每个输入框， 创建自己的name=“userName”属性，可以区别哪个输入框，并通过添加 属性提交：bindsubmit="方法名" 重置：bindreset="方法名"， 达到清除输入框内容的目的 js文件中的用法，e.detail.value.userName.length--> <view class="itemView">用户名： &lt.
html表单中获取表单数据,利用JS轻松实现获取表单数据
weixin_34874119的博客
06-04 1985
接触过Angularjs的都知道,ng支持双向绑定，我们可以轻轻松松的通过ngModel将我们的值绑定到界面，当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了。那对于我们开发前台网站，不用ng一类的MVVM框架，只引用了Jquery，那么在处理表单的时候该怎么做呢。一. 原始做法--请选择----1----2----3--程序员A会说,So easy,通过Jquery id 去获...
微信小程序电话号码input框的正则校验
improvement
11-13 4627
微信小程序电话号码input框的正则校验 1、wxml <!-- start 联系电话 --> <view class="mobile"> <sapn class="title">联系电话</sapn><input value="{{registration.mobile}}" class="mobile-weui-input" type="number" bindblur="mobileInput" maxleng
小程序 封装可清除input
weixin_40998880的博客
07-01 389
注： 该组件的定位可以自己写，我这里的直接 position: fixed; left:0; top:0; right:0; z-index: 10; background:#fff; 一、页面 <view class="customer-search"> <view class="search-entry"> <image class="search-icon" src="/images/search@2x.png"></image&gt..
微信小程序获取input输入框的值
热门推荐
stromGui同视
10-24 6万+
前几天写小程序写小程序发现小程序不能dom操作，这个就很尴尬啊，然后问了下度娘发现可以这样获得的。这个是wxml代码<view class='box'> <form bindsubmit='searchBox'> <input type='text' class='userBox' name='username'></input> <input type='text' c
Setting data field “xxxx“ to undefined is invalid.
前端视听
04-03 1万+
在这篇文章里面：https://www.jianshu.com/p/4bca132c5ade，其实遇到遇到了一个小的bug。 Setting data field "showDialog" to undefined is invalid. 于是定位到错误的地方 bug表现：将数据字段"showDialog"设置为未定义是无效的。 出现这种情况的时候是页面setData的时...
小程序setData报错未定义
PromiseCao的博客
11-06 5961
在wx:request()中使用setData会报这样的错误 因为这里的this是相对于wx:request()的当前对象，我们可以这样解决：因为这里的wx:rewuest()是在页面加载时调用，所以我们可以在onLoad（）中定义一个变量that ，将this赋值给that，那么此时的that代表相对于onLoad（）的当前对象，然后在success回调函数中直接使用that.setDat...
微信小程序input详解
a_靖的博客
07-18 1万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 左边扫码随时向我提问，上方有QQ群，有兴趣的可以加！！！ 我在开发过程中，遇到了一些常见的问题，希望通过这篇文件帮助大家避坑··· 问题与解决方法： 1.写输入框的时候，想实时获取输入框的焦点 用到的事件和属性： bindfocus EventHandle ...
一个常用的表单文本框input输入提示
aiqixiao2017的博客
08-05 161
先保存运行下面的代码，看效果。<input name="Price" type="text" value="面议" size="10" maxlength="10" onClick="if (this.value=='面议') this.value=''" onBlur="if (this.value=='') this.value='面议'">　　这个js的解释是，在鼠标点...
微信小程序获取input数据代码
最新发布
10-03
微信小程序中获取用户输入的`input`数据通常是在表单提交或者实时监听事件时进行的。这里是一个基础的例子，假设你有一个简单的文本输入框： ```html <!-- .wxml --> <view class="container"> <input type="text" id="myInput" placeholder="请输入内容" /> <button bindtap="handleInput">获取输入</button> </view> ``` 对应的 JavaScript 文件 (`app.js`) 中你可以这样处理： ```javascript // app.js Page({ data: { inputValue: '' }, handleInput: function(e) { let inputValue = this.selectComponent('#myInput').value; // 获取输入值 console.log('用户输入的内容:', inputValue); // 这里可以将inputValue保存到全局变量、状态管理工具（如 wx.cloud）或传递给其他组件 } }) ``` 在这个例子中，当点击按钮时，会触发`handleInput`函数，它通过`this.selectComponent`选择器获取到输入框组件，并从中读取用户输入的值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值