微信小程序实现input自由选中内容(已封装)

最新推荐文章于 2025-03-12 20:28:32 发布
最新推荐文章于 2025-03-12 20:28:32 发布
阅读量5.7k 收藏 4
点赞数 1
分类专栏： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/java558/article/details/100133614
版权

老规矩先来看看效果噻！

在这里插入图片描述

从上面的录屏中我们可以看出，要实现input自由选中内容的功能是可以实现的，原理其实很简单。

从微信小程序官方文档（input组件）中我们可以发现：
https://developers.weixin.qq.com/miniprogram/dev/component/input.html

在这里插入图片描述

没错！这就是input选中内容的方法。但有一个小问题，正如文档所言，只有自动聚焦时有效，也就会出现，只有第一次操作是有效的。怎么办？

很简单，我们可以手动让input每次操作都自动聚焦而不是点击聚焦，这样就能实现啦！

然而怎么才能做到点击input框还能避免点击聚焦呢？同样很简单！只需要在input框上盖一个透明遮罩层就可以啦！

最低0.47元/天 解锁文章
uniapp小程序中input内容选中效果
hu104160112的博客
05-19 6647
先看下效果 点击按钮选中input的内容，使用 focus 配合 selection-start和selection-end实现 //html <view class="pickbox"> <input class="uni-input" type="text" v-model="value" :focus="renameFocus" :selection-start="start" :selection-end="end" @blur="bindblur"/> <bu
小程序全选
WeiflR10的博客
11-23 565
效果图： wxml <view style="position:relative;top:100rpx;"> <checkbox-group bindchange="selectChange"> <!-- 全选按钮 --> <view> <checkbox value="all" bindtap="selectall" />全选 </view> <view class="content" wx:.
微信小程序 给input 添加选中样式
ZZHK666的博客
08-01 3113
微信小程序 给input 添加选中样式
几种微信小程序获取 input 内容（直接代码演示）
最新发布
m0_67325488的博客
03-12 551
input bindinput='getInputValue' name='price' type='text' placeholder='输入内容'></input>console.log(e.detail);// {value: "输入的内容", cursor: 光标位置}事件是在光标移动或输入内容发生变化时触发的，不需要手动点击按钮即可获取数据。1. 使用 bindinput 事件。
封装微信小程序中input组件组件
shiyzhang
11-12 1014
<view class='input-row line'> <text class="iconfont {{iconfont1}}" /> <input name="{{name}}" value="{{value}}" maxlength="{{maxlength}}" password="{{password}}" ...
微信小程序授权登录和获取手机号功能（详细）
2401_83916355的博客
03-30 2871
请依次允许获得你的公开信息及手机号码请升级微信版本（四）index.wxss.header {.content {.operBtns{important;important;*/（三）index.jsPage({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。AuthorizedLogin: ‘授权登录’,
微信小程序原生组件封装之input校验
zz_prayer的博客
06-14 1284
文本输入框功能： 可以选择输入手机号码或者验证码（其余功能需要根据场景自己开发），同时对输入的内容进行校验 可以自定义校验失败的文案提示以及样式的修改 在失去焦点以及当前类型的最大长度的时候会开启校验，校验不通过鬼进行文案提示手动删除文本框中的内容的时候，当长度为0时，默认关闭该校验 <zf-input label="" // 标题 ---- 如果不传，默认不展示 type="text" // 输入的文本的类型，默认为text ,可选择的类型为： text(文本输入键盘) number(数字输
微信小程序 input数据动态绑定，并封装为组件
吕小医的博客
05-30 1551
官方提供的案例：https://developers.weixin.qq.com/miniprogram/dev/component/input.html 在官方提供的案例中只有一个简单的时间，并没有去封装为一个组件，在时间项目开发中我们常常要把共有的部分抽象出来，封装为一个组件，下面提供一个实现 注意：在微信小程序中默认不是动态绑定的，需要我们对不同的输入框调用不用的方法，实现对不同的数据动态绑定，因此我们封装组件的时候必须考虑到不同的方法 在template.wxml(没有请创建)中 <templ
微信小程序实现input内容自由选中功能
根据给定的信息，我们需要生成关于微信小程序input选中内容组件代码的知识点。下面将详细介绍这些知识点： ### 微信小程序基础 在深入介绍input选中内容组件之前，首先需要了解微信小程序的基本概念和开发环境。 ...
微信小程序input选中内容组件check_all_input功能介绍
check_all_input组件代码是针对微信小程序input组件的扩展或封装，旨在实现input框内文本的自由选中功能。这可能包含对input组件属性的特殊配置，以及对触摸事件和选中事件的处理逻辑。开发者通过阅读和理解这些代码...
微信小程序picker组件省市二级联动及其修改时进行回显
01-09
在微信小程序开发中，`picker`组件是一种常用的选择器，常用于实现用户选择日期、时间、选项等操作。本篇文章将深入探讨`picker`组件在实现省市二级联动以及修改时回显的效果，这对于构建交互良好的用户界面至关重要...
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
08-28
主要介绍了微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法,涉及事件绑定及this.setData动态设置属性数据的相关操作技巧,需要的朋友可以参考下
微信小程序使用uni-app开发小程序及部分功能实现详解心得
Fang2001131919的博客
06-19 4788
uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；到此这篇关于微信小程序使用uni-app开发小程序及部分功能实现的文章就介绍到这了,更多相关微信小程序用uni-app开发小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
移动设备input输入框点击后自动选中内容_如在微信移动版上正确的「引用消息」？...
weixin_39531183的博客
12-04 481
用过微信 Mac 版或者 Windows 版的人，应该都知道桌面版微信有一个独占的功能：引用消息。通过右键点击聊天中的某一条消息，并选中「引用消息」按钮，你的输入框中就会自动出现引用的样式，方便大家在群聊中有针对性地展开讨论。虽然微信桌面版这个引用消息的效果比不上某 IM 之光应用，但是聊胜于无。那么，在 iOS 或者 Android 设备上的微信要怎么使用「引用消息」这个功能呢？既然微信官方的移...
微信小程序如何点击按钮获取input里面输入的值
LJJONESEED的博客
06-17 812
微信小程序如何点击按钮获取input里面输入的值
微信小程序实现全选,半选功能，复习指南
2401_84097520的博客
04-06 1105
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
小程序获取文本内容
qq_39477480的博客
08-20 333
【代码】小程序获取文本内容。
微信小程序实现全选,半选功能
k464746的博客
08-10 3241
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
微信小程序实现长按内容选中
m0_50707858的博客
02-05 2678
小程序实现长按文本选中 之前用的是selectable属性，此属性已经废弃 现在使用user-select属性 该属性默认值为false，生效时会使文本节点显示为 inline-block（内联对象）
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值