js 实现验证码输入框

最新推荐文章于 2024-07-11 09:55:16 发布

东方睡衣

最新推荐文章于 2024-07-11 09:55:16 发布

阅读量530

点赞数

文章标签： javascript 微信小程序开发语言

本文链接：https://blog.csdn.net/web2022050903/article/details/127454738

版权

本文介绍了如何使用JavaScript和CSS在微信小程序中实现验证码输入框，包括引入阿里巴巴矢量图标、CSS的var函数、iOS底部安全距离适配、transition、box-shadow和border-radius等技术细节。

摘要由CSDN通过智能技术生成

1.实现效果

2.实现原理

2.1 引入阿里巴巴矢量图标

可参考文章：微信小程序引入外部icon（阿里巴巴矢量图标）[1]^{[1]}[1]

2.2 css函数var

css的var函数[2]^{[2]}[2]：var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

语法：

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称，必需以 – 开头。
value	可选。备用值，在属性不存在的时候使用。

eg:

page {--color: #222;background: var(--color);--bg: orange;--w: 175rpx;
}

2.3 ios底部安全距离

苹果官方推荐：使用env()，constant()来进行底部安全距离适配。

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

东方睡衣

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 实现验证码输入框

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
复制链接

扫一扫

HTML+CSS+JS实现验证码输入四个独立输入框

qq_22717749的博客

06-06

738

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>核销凭证</title> <meta name="viewport" content="width=device-width,initial-sacle=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"> </head>

原生 js 实现 验证码输入效果

逆风优雅的博客

12-27

1957

原理：第一个输入框获取焦点，输入完内容后，后面的自动获取焦点，当删除的时候，当前删除完之后，前面的自动获取焦点删除。

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

JS实现多个输入框填写验证码

04-18

678

首先的想法就是6个input框，每输入一个数字之后，切换到下一个input，即切换focus，如果输入很快的话，会导致切换不过来。有卡顿的感觉，pass掉，所以最后使用一个input来接受输入最好，通过样式来切割成6个框，感觉这种也不好控制也就pass掉；这个验证码输入应用场景非常的多，看起来很简单的，但是做起来还是有一些坑。最后的想法是放6个input框。

方格验证码输入框实现方式

最新发布

weixin_39339407的博客

07-11

910

实现一个带有光标的方块输入框就完成了，如果不需要显示光标，那么实现起来会非常简单。我们只需创建几个UILabel和一个隐藏的，然后监听用户输入，将所有内容分割并按顺序显示到UILabel中即可。每个需求和设计的实现方案都不是唯一的，如果大家有更好的方案，欢迎分享出来。

微信小程序自定义tabBar,中间圆形凸起

05-31

微信小程序原生的自定义tabBar组件，中间圆形凸起。支持darkMode，深色主题自适应支持iPhoneX底部横线自适应

微信小程序实现tabbar凹凸圆选中动画

苏苏就是小苏苏的博客

09-20

2705

微信小程序实现底部tabbar凹凸圆选中动画

小程序实现动态tabbar

benlalagang的博客

03-14

1828

需求是小程序的地步tabbar 要在后台能设置还要看能改动的尺度，如果不是在小程序里，那么底部tabbar 随便渲染，前端无非就是请求来数据循环渲染到页面上。van-tabbar 组件来实现 app.json 注册一下使用到的一些页面用{{behaviors}}封装下相互之间的跳转使用 wx.redirectTo。tabbar渲染的列表是进入小程序时请求过来的然后根据每一项的属性判断它对应的是哪一个页面。但是这样的模式有一个前提是总数是定的都有。

uni-app 微信小程序之自定义中间圆形tabbar

@必意玲

12-02

1858

首先在pages.json文件中，新建一个tabbar页面"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages"style": {"navigationBarTitleText": "tabbar页面",},.....// 其他页面],tabbar页面代码此页面主要是写tabbar的html样式和布局，引用主页面代码，通过v-if控制进行展示主页面indexsearchmaimnews。

微信小程序实现自定义凸起tabBar组件源码下载，参考

上善若水-架构师编程乐园

06-06

626

大家可能见过不少的微信小程序的tabBar是不规则的，而是某个button杀死凸起的圆球状态的，比如天下网吧微信小程序的tabBar就是这样的：这个tabBar中间的就是一个圆形「凸起」的button。当然还有更多的小程序他们的tabBar更酷炫，有很多不错的动画效果。那么如何实现这样的不规则tabBar呢？答案是得用自定义tabBar 咱们今天以天下网吧的自定义tabBar组件源码（源码在文章最底部有下载链接）为例，希望能抛砖引玉让大家分享自己的不错的自定义tabbar组件： ...

vue实现短信验证码输入框

10-15

综上所述，通过Vue.js实现短信验证码输入框需要了解以下知识点： 1. Vue.js基础：了解Vue.js的基本语法和组件化开发方式。 2. v-model指令：用于实现输入框数据的双向绑定。 3. data和watch：定义数据源并在数据...

jQuery实现验证码输入框代码特效.zip

11-08

在这个"132689953389701410"文件中，很可能包含了HTML、CSS和JavaScript（jQuery）的代码示例，通过解压并查看这些文件，你可以学习如何使用jQuery实现一个具有特效的验证码输入框。这是一个很好的学习和实践jQuery...

6位验证码输入框.zip

03-31

总结，微信小程序中的6位验证码输入框实现涉及WXML结构设计、WXSS样式控制以及JavaScript事件处理。通过隐藏光标、模拟letter-spacing属性，我们可以创建一个符合预期的、具有良好用户体验的验证码输入组件。在实际...

uniapp 基于 vue3 开发的【验证码输入框】

04-11

概要：uniapp 基于 vue3 开发的【验证码输入框】，输入值的输入框切换和光标是否自动聚焦等；使用人群：使用 uniapp 基于 vue3 开发的应用，需要用到输入验证码；使用场景：短信验证码登录、短信验证码验证身份、...

自定义tabbar 中间带个大圆圈

flg1554112450的博客

07-13

1938

先看效果图第一步创建tabbarView 继承自 UIView tabbarview上边需要添加的控件 @property (nonatomic, strong) UIButton *findButton;// 首页按钮 @property (nonatomic, strong) UIButton *lanMuButton;// 栏目按钮

微信小程序自定义tabbar 图标凸出效果

weixin_45252024的博客

07-01

3188

底部自定义tabbar实现凸出效果及源码

微信小程序查看官方样式及修改checkbox样式为圆圈

叶落无痕的博客

10-12

2019

小程序中checkbox的样式是正方形的，设计图上给的是一个圆圈，在查看官方demo的时候发现了怎么修改的。可以看到选中的复选框的class为wx-checkout-input。选中的样式为wx-checkbox-input-checked。还可以设置选中的背景颜色。也可以修改对勾的颜色大小。

微信小程序自定义tabbar导航栏，中间凸出样式

m0_65826745的博客

03-17

1741

微信小程序自定义tabbar底部导航栏

6位验证码输入框

m0_63873004的博客

11-08

876

6位验证码输入框

Vue 实现输入框短信验证码功能

05-10

实现输入框短信验证码功能，可以使用 Vue.js 的模板语法和组件化思想，具体实现步骤如下： 1. 创建一个包含输入框和发送验证码按钮的组件。 ```html <template> <div> <input type="text" v-model="code" /> <button @click="sendCode" :disabled="disabled">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { code: '', disabled: false, buttonText: '发送验证码', countdown: 60 } }, methods: { sendCode() { // 发送短信验证码 // ... // 设置倒计时 this.disabled = true; this.buttonText = `${this.countdown}s 后重新发送`; const timer = setInterval(() => { this.countdown--; this.buttonText = `${this.countdown}s 后重新发送`; if (this.countdown === 0) { clearInterval(timer); this.disabled = false; this.buttonText = '发送验证码'; this.countdown = 60; } }, 1000); } } } </script> ``` 2. 在父组件中引入该组件，并监听子组件的输入事件。 ```html <template> <div> <sms-code @input="handleInput" /> <button @click="submit">提交</button> </div> </template> <script> import SmsCode from './SmsCode.vue'; export default { components: { SmsCode }, data() { return { phone: '', code: '' } }, methods: { handleInput(value) { this.code = value; }, submit() { // 提交表单 // ... } } } </script> ``` 在子组件中，使用 `v-model` 来实现与父组件的双向数据绑定。当输入框的值发生变化时，通过 `$emit` 方法将新的值传递给父组件。 ```html <template> <div> <input type="text" v-model="code" @input="$emit('input', code)" /> <button @click="sendCode" :disabled="disabled">{{ buttonText }}</button> </div> </template> <script> export default { data() { return { code: '', disabled: false, buttonText: '发送验证码', countdown: 60 } }, methods: { sendCode() { // 发送短信验证码 // ... // 设置倒计时 this.disabled = true; this.buttonText = `${this.countdown}s 后重新发送`; const timer = setInterval(() => { this.countdown--; this.buttonText = `${this.countdown}s 后重新发送`; if (this.countdown === 0) { clearInterval(timer); this.disabled = false; this.buttonText = '发送验证码'; this.countdown = 60; } }, 1000); } } } </script> ``` 这样就可以实现一个简单的输入框短信验证码功能了。