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

Question

/* 密码弹窗 */
.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="../../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="../../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,
    })
  },

Answer 1

input

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

Answer 2

你可以定义一个在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>

Answer 3

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