H5W3
当前位置:H5W3 > 其他技术问题 > 正文

小白请问小程序输入数字后怎么把数字变成*号?

/* 密码弹窗 */
.password-model {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
}
/* 输入车牌与键盘 */
.link_item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
flex: 1;
-webkit-align-items: center;
align-items: center;
padding-bottom: 30rpx;
}
.link_right {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-flex: 1;
flex: 1;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
align-items: center;
font-size: 30rpx;
color: #666;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.j_center {
-webkit-justify-content: center;
justify-content: center;
}
.finishbox {
position: fixed;
width: 100vw;
top: 0;
height: 100vh;
background-color: #fff;
z-index: 100;
text-align: center
}
.center_box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.finish_img {
width: 160rpx;
margin-bottom: 20rpx
}
.finish_title {
font-size: 40rpx;
margin-bottom: 20rpx
}
.finish_btn {
margin-top: 20rpx;
color: #f9993d
}
.btn_block {
background-color: #f9993d
}
.picker,
.input_box_item {
display: inline-block;
margin: 0 4rpx;
border: 1px solid #000;
width: 60rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
}
.link_item:not(:nth-last-child(1)) {
border-bottom: none;
}
.chose_btn {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center
}
.chose_btn:nth-child(1) {
margin-right: 20rpx
}
.check_img {
width: 40rpx;
height: 40rpx;
border: 1px solid #eee;
margin-right: 10rpx
}
.keyword {
z-index: 9999;
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
padding: 20rpx 0 50rpx;
background-color: #f7f7f7;
}
.carword,
.numword,
.engword {
flex-wrap: wrap;
justify-content: space-around;
}
.car-item {
width: 9%;
height: 75rpx;
margin: 0 10rpx;
margin-bottom: 15rpx;
color: #44505c;
background-color: #fff;
border-radius: 12rpx;
box-shadow: 0 5rpx 5rpx rgba(164, 163, 164, .3);
}
.num-item {
width: 30%;
height: 100rpx;
margin: 0 3rpx 15rpx;
background-color: #fff;
border-radius: 12rpx;
box-shadow: 0 5rpx 5rpx rgba(164, 163, 164, .3);
box-sizing: border-box;
font-size: 50rpx;
color: #44505c
}
.car-item:hover,
.num-item:hover {
color: #fff;
background-color: #185db3;
}
.num-item.disabled {
background: #ccc
}
.eng-item {
width: 94rpx;
min-width: 94rpx;
max-width: 94rpx;
height: 56rpx;
margin-bottom: 10rpx;
border: 1px solid #eee;
background-color: #fff;
border-radius: 2rpx
}
.eng-item:not(:nth-child(7n)) {
margin-right: 10rpx
}
.link_list {
display: block;
width: 580rpx;
margin: 60rpx auto;
padding: 30rpx 0;
box-sizing: border-box;
background-color: #fff;
border-radius: 10px;
}
.linlk_title {
padding: 0 0 30rpx;
text-align: center;
font-size: 30rpx;
}
.link-onoff {
margin: auto;
width: 64rpx;
height: 64rpx;
padding: 14rpx;
background: none;
border: 5rpx solid #fff;
box-sizing: border-box;
border-radius: 99999px;
}
.link-onoff image {
float: left;
width: 100%;
height: 100%;
}
.input_box_item {
height: 80rpx;
margin: 0 6rpx;
line-height: 80rpx;
border: 1px solid #888;
border-radius: 12rpx;
}
.check_img {
border-radius: 99999px;
border-color: #ccc;
box-sizing: border-box;
}
.btn_block {
width: 680rpx;
height: 90rpx;
margin: 40rpx auto;
font-size: 32rpx;
color: #fff;
text-align: center;
line-height: 90rpx;
border-radius: 24rpx;
background: #ff643e;
box-shadow: 0 7rpx 19rpx rgba(164, 163, 164, .3);
}
.numword_two .num-item {
position: absolute;
bottom: 50rpx;
}
.numword_two .num-item:nth-of-type(1) {
left: 10rpx;
}
.numword_two .num-item:nth-of-type(2) {
right: 10rpx;
}
.numword_two .num-item image {
width: 40%;
}
.link-btmbit{
width: 60%;
margin: 10px auto;
color: #fff;
border: 0;
background-color: #185db3;
border-radius: 99999px;
}
<view class="password-model">
<view class="link_list">
<view class="linlk_title">点击输入密码</view>
<view class='link_item'>
<view class='link_right flex j_center'>
<view class="input_box_item" wx:for="{{plateBox}}" wx:key="index" catchtap="showKey" data-idx="{{index}}">{{item}}</view>
</view>
</view>
<button class="link-btmbit">提交</button>
</view>
<button class="link-onoff"><image src="https://segmentfault.com/images/error.png" mode="widthFix"></image></button>
</view>
<view class="keyword" hidden="{{hideKey}}">
<view class="numword flex">
<block wx:for="{{numword}}" wx:key="index">
<view class="num-item flex a_center j_center" catchtap="inpKey" data-inp="{{item}}" data-idx="{{keyI}}">{{item}}</view>
</block>
</view>
<view class="numword flex numword_two">
<view class="num-item flex a_center j_center" catchtap="delKey" hidden="{{carKey==false}}">←</view>
<view class="num-item flex a_center j_center" catchtap="closeKey">
<image src="https://segmentfault.com/images/jiantouxia.png" mode="widthFix"></image>
</view>
</view>
</view>
data: {
plateBox: ['', '', '', '', '', ''],
numword:[1,2,3,4,5,6,7,8,9,0],
hideKey:true,
carKey:false,
keyI:0
},
showKey: function (e) {
let idx = e.currentTarget.dataset.idx
let plateBox = this.data.plateBox
let carKey = true;
this.setData({
hideKey: false,
})
if (plateBox[plateBox.length - 1] != '') {
if (idx == 0) {
carKey = false
}
this.setData({
keyI: idx,
carKey: carKey
})
}
console.log(this.data.keyI)
},
inpKey: function (e) {
let plateBox = this.data.plateBox;
let inp = e.currentTarget.dataset.inp;
let idx = e.currentTarget.dataset.idx;
if (plateBox[plateBox.length - 1] == '') {
for (let i in plateBox) {
if (plateBox[i] != '' && i < plateBox.length - 1) {
idx = parseInt(i) + 1
}
}
if (plateBox[0] == '') {
idx = 0
this.setData({
carKey: false
})
}
}
plateBox[idx] = inp + ''
if (plateBox[plateBox.length - 1] == '') {
idx++
}
if (idx != 0) {
this.setData({
carKey: true
})
}
this.setData({
plateBox: plateBox,
keyI: idx,
})
},

回答

input

<input class="weui-input" password type="text" placeholder="这是一个密码输入框" />

你可以定义一个在wsx中定义一个函数

<wxs module="CalcHelper">
    function placePwd(org,placeCharacter){
        var result='';
        if(org){
            result = org.split('').map(function(item){
                return placeCharacter||'*';
            }).join('')
        }
        return result;
    }
    module.exports = {
        placePwd:placePwd,
    }
</wxs>

然后在WXML中使用这个函数

<view class="input_box_item" wx:for="{{plateBox}}" wx:key="index" catchtap="showKey" data-idx="{{index}}">{{CalcHelper.placePwd(item)}}</view>

监听输入操作,替换value为*

未经允许不得转载:H5W3 » 小白请问小程序输入数字后怎么把数字变成*号?

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址