微信小程序 动态设置placeholder和按钮选中取消状态

最新推荐文章于 2022-07-10 21:21:11 发布
最新推荐文章于 2022-07-10 21:21:11 发布
阅读量4.3k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bluesky1215/article/details/62225646
版权
这篇博客展示了如何在微信小程序中动态设置输入框placeholder和按钮的选中/取消状态。通过绑定点击事件和使用数据绑定，实现当用户点击不同按钮时，input的placeholder值变化，并更新对应按钮的选中样式。
摘要由CSDN通过智能技术生成

效果图展示



通过绑定点击事件placeholder方法，获取data-num的值，通过js判断num等于几，然后通过cla

最低0.47元/天 解锁文章
bluesky1215
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
08-28
主要介绍了微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法,涉及事件绑定及this.setData动态设置属性数据的相关操作技巧,需要的朋友可以参考下
微信小程序 调色板
最新发布
Hacker_Hacker007的博客
07-03 549
这是插件的地址，使用的话先把这个插件下载下来，找到src，在项目创建一个文件夹，把src中的内容拷进去，然后调这个就可以了，具体的话看微信开发如何调用插件。注意：是在uniapp中直接使用的一个color-picker插件，改一下格式即可在微信小程序的原生代码中使用。我这是uniapp vue3版本的，微信小程序版本的github上已经有了，照着写就可以。
Input 框中的 placeholder 属性获取焦点清空
weixin_45242865的博客
08-17 8203
本人在开发一个微信小程序时，遇到如下问题： input 框获取了焦点，但是 placeholder 属性的值却仍然还在，必须输入任意数据后，该值才会隐藏，这会给用户一种不好的体验效果。 理想效果应为：input 框一旦获取焦点，就隐藏 placeholder 属性的值。 一、在开发微信小程序时的实现方法大致如下： ① wxml 文件中的相关代码 首先在 wxml 文件中为 input 标签设置 onfocus 和 onblur 两个事件，且 placeholder 属性的值从 js 文件中的 data
微信小程序设置input框placeholder的字体大小
qq_59076775的博客
07-10 5367
微信小程序修改placher的值
微信小程序 input输入框值和文本动态绑定
qq_44170622的博客
06-22 4562
实现思路：取到input里面的值，然后我们将button和input值进行动态绑定 我们可以在data定义变量 X:" ",然后我们取到input值，利用this.setData方法赋值为全局变量 <input bindinput="getNumber" placeholder="请输入0-100的数字"></input> 注意在bind input有专门的值 getNumber(e){ var value=e.detail.value this.setData({.
删除微信web开发者工具中失效项目，动态设置placeholder和按钮选中取消状态 ..
03-29
我日常使用微信web开发者工具来学习和开发我们的微信小程序，在这过程中，我们可能会创建很多小程序项目，总会有时候，我需要删除我们不需要的项目，通常情况下，我们可以进入要删除的项目，在“项目”菜单下，找到...
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
10-18
总结一下，微信小程序的首页分类功能通过监听用户点击事件、动态设置数据以及应用CSS样式来完成，而搜索功能则是通过`<input>`和`<button>`组件结合事件绑定和服务器请求来实现的。理解并掌握这些实现思路和代码，能...
微信小程序实现城市列表选择
12-10
在微信小程序中实现城市列表选择是一项常见的功能，它允许用户方便地从众多城市中选取出发地和目的地。本文将详细讲解如何实现这一功能，并提供相关的代码示例。 首先，我们来看一下实现城市列表选择的基本需求： 1...
微信小程序实现单选、全选、反选、取消全选功能
夏天的博客
12-09 4540
实现效果 源代码 <!-- 循环单选 --> <view class="parkNotice-email" v-for="(item2, index2) in dataList2" :key="index2" @click="checkChange(index2)" > <view class="img"> <image :src=" item2.check ? lo
微信小程序的占位符placeholder以及选择器picker使用知识点
zhoutao2的博客
07-11 8588
1、在需要带占位符placeholder的textarea组件中，文本值优先使用value中定义的值（包括绑定事件输入），如果value中的值（可以从js文件中的data传入）是空''，则显示占位符placeholder的默认值2、picker选择器可以使用disabled属性来控制该选择器是否可用，当属性为不可用时，可以在picker组件中使用view组件再加入一个默认值，可以实现根据disab...
[微信小程序]设置placeholder的文字居中
知识共享，快乐分享
04-03 1万+
直接上代码 wxml &lt;input class='login-form-pwd' placeholder='请输入商家登录密码' placeholder-class="center"&gt;&lt;/input&gt; wss .center{ text-align: center; } 效果 思路 也就是单独为placeholder设置了一个class，然...
微信小程序 radio-group（排列） 及事件绑定、点击切换样式
风吹草低见牛羊
05-03 3万+
一、这里的测试页面是参照（小打卡的-tab页“发现”）来设计的 wxml代码： &lt;import src='../userlist/listItem.wxml' /&gt; &lt;!--导入列表项模板--&gt; &lt;view class='window'&gt; &lt;view class='searchbox' bindtap='search'&gt; ...
微信小程序 单选框选中之后为什么取消不了?
Be myself
02-19 2814
1，radio-group是radio的父级组件，而你的代码wx:for循环了radio-group，所以事实上你的代码是有很多radio-group，而不是一组radios。故而你的radio按钮可以多选； 2，之所以取消不了，是因为radio按钮本身所致，radio按钮本身的特性就是必须保持一个选中。...
微信小程序单项选择框radio-group用法
热门推荐
qq_38949477的博客
06-21 4万+
wxml &lt;radio-group class="radio-group" bindchange="radioChange"&gt; &lt;label class="radio" &gt; 男&lt;radio value="" checked=""/&gt;
【微信小程序-0基础入门】项目发布完整流程
Javascript_tsj的博客
05-29 5747
写在前面： 上一节讲述了小程序的相关介绍以及账号注册，这一节讲述小程序发布的具体流程。 目录 🍓安装开发者工具 🍒小程序项目发布流程 🍍小程序代码的构成-项目结构 🧀1. 了解项目的基本组成结构 🥞2. 小程序页面的组成部分 🍑小程序代码的构成 - JSON 配置文件 🍰1. JSON 配置文件的作用 🍔2. app.json 文件 🍅3. project.config.json 文件 个人主页：个人主页 系列专栏：系列专栏【微信小程序】 🍓安装开发者工具 微信开发
微信小程序多选框选中后改变样式--自定义图片
qinAction的博客
12-18 8754
微信小程序多选框选中后改变样式--自定义图片  原理：主要利用了js 的indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 wxml 多选框 {{item.name}} wxss .radio-group{
微信小程序实现给循环列表添加点击样式
yonggeit的博客
04-15 2万+
微信小程序有个属性hover-class=’active’,是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="tags"> <view class="tag-title">标签</view> <view class="tag-box"> <view wx:for="{
微信小程序商品选择点击取消
Xjiayi的博客
06-04 2337
let clickAgain = that.data.clickAgain;//data里定义的一个变量if (clickAgain == e.currentTarget.dataset.index){if (that.data.clickId == -1){that.setData({clickId: e.currentTarget.dataset.index});}else{that.setD...
微信小程序修改input placeholder样式
04-24
好的，关于微信小程序修改input placeholder样式，你可以通过以下两种方法实现： 1. 在CSS样式文件中对placeholder伪类进行定义，例如： ``` input::-webkit-input-placeholder{ color: #999999; font-size: 14px; } input::-moz-placeholder{ color: #999999; font-size: 14px; } input::-ms-placeholder{ color: #999999; font-size: 14px; } ``` 2. 在wxml文件中使用input组件的placeholder-style属性进行定义，例如： ``` <input placeholder="请输入密码" placeholder-style="color:#999999;font-size:14px;"/> ``` 希望能够帮助到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值