小程序PICKER里面使用TEXT代替input，解决点击下拉弹出手机输入法的问题

最新推荐文章于 2024-04-18 18:04:43 发布

原创最新推荐文章于 2024-04-18 18:04:43 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在小程序中使用TEXT组件替代INPUT组件的方法，解决了PICKER组件触发手机输入法弹出的问题，提升了用户体验。

小程序PICKER里面使用TEXT代替input，解决点击下拉弹出手机输入法的问题

  <picker class='input_style' bindchange="bindPickerChange" value="{{rlsIndex}}" range="{{rlsList}}" range-key='label'name='relationship'>
        <text class='content_title'>{{rlsList[rlsIndex].label}}</text>       
     </picker>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大熊猫今天吃什么

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序-点击按钮弹出软键盘

河马Shawn的博客

06-25

2万+

1.实现目标：即点击右下角的按钮，弹出输入框以及软键盘，并且按钮消失。 2.设计： ps.当input组件获取到焦点时才会弹出软键盘，所以foucs可以设置为true或者auto，如果设置为false则不会弹出软键盘。 3.代码实现： wxml： <!-- 自定义标题栏 ...

阻止picker.js插件弹出键盘

weixin_34037173的博客

09-19

346

<input id="focus" type="text" value="" placeholder="手机号" readonly="readonly" onkeyup="this.value = this.value.replace(/\D/,'')"/> 只需加上readonly="readonly"即可！

参与评论您还未登录，请先登录后发表或查看评论

微信小程序自动化测试-----手机输入法的安装

vissy小朱测试分享

11-29

747

FAutoTest这套框架，默认是安装input.apk 如果手机支持adb安装apk，则可以直接使用框架里的input.apk,但如果手机不支持，则可以使用下面的这个apk。 ADBKeyBoard.apk 1：首先下载这个安装包，下载地址：https://github.com/senzhk/ADBKeyBoard 2：直接在手机里打开这个apk，进行安装。 3：安装完成后，手机系统设置里，输入.........

picker组件套用input组件，点击弹出手机键盘，该如何关闭键盘

bigboy1010的博客

05-27

1272

这个问题很简单直接用input的disable属性即可 <pickermode="region"bindchange="modifyAddress"> <inputclass="flitem-content"placeholder="请输入收货地址"disabled="true"value="{{addressData.address}}"></input> ...

解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题

可可爱爱的你吖的博客

12-24

2489

解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求：一个信息提交页面：有input输入框，有picker选择器遇到的问题：点击input输入框时，手机自动弹出键盘，但是点击下方的picker选择器时，键盘还在，导致了键盘和picker选择器重叠解决方案： <view class="item"> <view class="title">真实姓名</view> <input class="input" bindinput="re

使用uview,下拉框禁止弹出小键盘（亲测有效）

qq_40263124的博客

07-09

4495

uview开发移动端，下拉框选择弹出小键盘，挡住了下拉框，解决办法。（已解决）

微信小程序picker组件下拉框选择input输入框的实例

08-29

在微信小程序开发中，`picker`组件用于创建一个下拉选择框，而`input`输入框则用于用户输入文本信息。结合两者，可以创建出既包含预设选项又允许用户自定义输入的交互界面。本实例主要展示了如何将`picker`组件与`...

使用uniapp中picker-view封装底部选择弹框选择器，解决微信小程序中不可自定义样式问题

05-19

使用uniapp制作微信小程序时候，需要一个城市选择框，但是微信中的弹框样式不可自定义，出现了与项目主题样式不一致问题，于是使用uniapp中picker-view封装底部选择弹框选择器，实现支持自定义确定和取消按钮颜色...

微信小程序下拉滚动选择器picker绑定数据的两种方式

03-29

微信小程序下拉滚动选择器picker绑定数据的两种方式本地数据绑定和wx.request(OBJECT) json数据绑定 (此图片来源于网络，如有侵权，请联系删除! ) 1.本地数据绑定（对象数组） Page({ data:{ //户型这是一个...

微信小程序实现自定义picker选择器弹窗内容

08-27

微信小程序实现自定义Picker选择器弹窗内容微信小程序实现自定义Picker选择器弹窗内容是指在微信小程序中实现自定义的Picker选择器弹窗内容，满足开发者对选择器弹窗内容的个性化需求。本文将详细介绍微信小程序...

微信小程序开发之Picker组件

最新发布

m0_59704905的博客

04-18

1441

在微信小程序中，Picker 组件是用来实现选择器功能的，允许用户在多个选项中进行选择。它可以呈现多种形式，如单列选择、多列联动选择等。

微信小程序使用vant组件的输入框搭配弹层选择器注意事项

07-29

3749

来禁用输入框,样式会变成禁用状态下的样式很难改动,只需要设置为只读即可,也不会触发手机键盘.这个只读属性,不然会导致用户手机触发默认键盘遮挡你的弹窗和选择器内容影响体验.也不要用。在做这个效果的时候,输入框。...

vant ui picker选择组件展示值text设置遇到的坑

start_sea的博客

02-19

5280

vant ui picker选择组件展示值text设置遇到的坑做移动端项目时，用了vant UI组件，使用picker选择组件时遇到了些问题，简单记录下。在官方文档的例子中，picker组件默认展示的字段是columns数据中的text字段在实际项目中，接口返回的数据往往是没有text字段的，因此需要设置指定的展示字段。在官方文档中，说明需要使用columns-field-names属性设置，属性值为object数据，如：{ text: ‘text’, values: ‘values’, chil

vant picker 设置text

codingLeader的博客

03-21

4401

vant picker 设置默认显示字段 columnsFieldnNmes

vue使用vant picker实现级联选择

xfd19971030的博客

02-28

3662

vant picker 级联选择 <van-picker title="职位选择" show-toolbar v-if="showPositionType" style="position: absolute; bottom: 0; width: 100%; z-index: 99" :columns="columns" @cancel="onCancel" @confirm="onConf

vant picker二级联动选择text和value

Ghyanyan123456的博客

11-30

2201

前端控件代码 <van-cell-group> <van-field readonly clickable label="货物类型" placeholder="点击选择" v-on:.

el-date-picker 隐藏输入框通过按钮实现弹出