类似支付宝密码框输入

写一个类似支付宝/微信的密码输入框，找了很久，找到了一段代码，简单修改下

<!--四位验证码输入框组件-->
<template><view class="security-code-wrap"><label for="code"><ul class="security-code-container"><li class="field-wrap" v-for="(item, index) in number" :key="index"><i class="char-field">{{ value[index] || placeholder }}</i></li></ul></label><inputref="inps"class="input-code"@input="handleInput($event)"v-model="value"id="code"name="code":type="inputType":maxlength="number"autocorrect="off"autocomplete="off"autocapitalize="off"/></view>
</template>
<script>
export default {name: "SecurityCode",// component propertiesprops: {inputType:{type: String,default:'number',},number: {type: Number,default: 4,},placeholder: {type: String,default: "-",},},// variablesdata() {return {value: "",};},onLoad(){this.value=''},methods: {hideKeyboard() {// 输入完成隐藏键盘document.activeElement.blur(); // ios隐藏键盘this.$refs.inps.blur(); // android隐藏键盘},handleSubmit() {this.$emit("input", this.value);},handleInput(e) {console.log(e,'这个是键盘',this.number);//   this.$refs.inps.value = this.value;this.value=e.detail.value;if (this.value.length >= this.number) {// this.hideKeyboard();console.log('------de--e');}this.handleSubmit();},},
};
</script>
<style scoped >@import './index.css';
</style>

输入框样式

.security-code-wrap {overflow: hidden;
}
.security-code-container {margin: 0;padding: 0;display: flex;justify-content: space-between;
}
.security-code-container .field-wrap {list-style: none;display: block;width: 76rpx;height: 76rpx;line-height: 76rpx;text-align: center;font-size: 36rpx;background-color: #e6dccf;margin: 2px;color: #999999;border-radius: 4rpx;
}
.security-code-container .field-wrap .char-field {font-style: normal;
}
.input-code {position: absolute;left: -9999px;top: -99999px;width: 0;height: 0;opacity: 0;overflow: visible;z-index: -1;
}

类似支付宝密码框输入相关推荐

angularjs html 支付宝支付,angular仿支付宝密码框输入效果
项目需求,使用ng写一个密码框格子支付模块,一开始使用一个input+letter-spacing来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整.最终从网上查找到一款 ...
html5做密码形式的游戏,html5仿支付宝密码框的实现代码
废话不多说了,直接给大家贴代码了,具体代码所示: 仿支付宝密码框-移动端测 *{ margin: 0; padding: 0; } body { padding: 50px; } .clearfix: ...
Vue+iview 密码框输入显示隐藏控制
Vue+iview 密码框输入控制显示隐藏 1. 背景 2. 最终效果 2.1 隐藏密码 2.2 显示密码 3. 实现步骤 3.1 使用v-if.v-else 3.2 密码隐藏 3.3 密码显示 3. ...
html密码框输入内容隐藏,密码框显示提示文字的功能实现
在密码输入框内显示提示的文字,引导用户操作,实现的效果如下图显示. 未输入密码前: 输入密码后: 由于js无法直接控制input文本框中的type属性,因此无法通过js控制input文本框在密码框和普 ...
HTML里怎么设置密码框为星号,input密码框输入后设置显示为星号或其他样式
预览效果核心代码 {{"*".repeat(text.length)}} :type="type=='number'?'tel':'text'" ref=&q ...
Android自定义类似支付宝密码输入的控件
前言:感觉自己记忆力不是很好,很多写过的东西容易忘记,所以还是写个博客记录一下,菜鸟一枚,望各位师傅指点. 嘿喂狗,来看我们要实现的效果(如果你说:"开发之前当然看不到效果,看个diao啊& ...
vue,一路走来（14）--短信验证码框的实现（类似支付密码框）
由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实inp ...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
无需任何自定义，一个布局搞定仿微信支付宝密码框
全网太多的密码输入框的实现方案,基本上都是自定义之类的.看起来还是挺麻烦,冥思苦想,想出了一种简单方案,一个布局就搞定.布局如下; <?xml version="1.0" e ...
16、HTML密码框
网页中最典型的应用密码框的场景就是网站的登录注册页面在 HTML 中,把 <input> 标签的 type 属性设置为 password 可以表示密码框.具体语法格式如下: <in ...

类似支付宝密码框输入

类似支付宝密码框输入相关推荐

最新文章

热门文章