1. 程式人生 > >自制小程式密碼輸入框顯示隱藏

自制小程式密碼輸入框顯示隱藏

html

<view class="weui-cell">
      <view class="weui-cell__bd">
        <input password='{{isShowPassword}}' placeholder="新密碼,至少6位英文數字結合" placeholder-class='placeholder_class'/>
      </view>
      <view class="weui-cell__ft get_qrcode" bindtap='toggleShowPassword'>
        <image src='../images/eye.png' wx:if='{{isShowPassword}}'/>
        <image src='../images/closeeye.png' wx:if='{{!isShowPassword}}'/>
      </view>
    </view>

js

data: {
    isShowPassword: true
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
  
  },
  toggleShowPassword: function (e) {
    var isShowPassword = !this.data.isShowPassword;
    this.setData({
      isShowPassword: isShowPassword
    });
  },



相關推薦

自制程式密碼輸入顯示隱藏

html<view class="weui-cell"> <view class="weui-cell__bd"> <input passwor

百度程式金額輸入校驗元件

標題 swan檔案 <input name="{{nameStr}}" value="{=value=}" bindinput="vChange" bindblur="vBlur" maxlength="{{maxLength}}" placeholde

密碼輸入顯示明文密碼

在做登入視窗的時候,通常會遇到需要顯示密碼這一功能,這一功能很簡單。 為checkbox新增事件監聽器如下: vision_password.setOnClickListener(new View.O

jQuery實現input密碼輸入顯示為星號“*”

input密碼框顯示為星號“*” <!DOCTYPE html> <html> <head> <meta charset="UTF

【程式碼筆記】HTML+CSS+JavaScript實現密碼輸入顯示文字

原理: 通過設定一個input為password,預設display為none,再設定一個input為text設定為block,利用js指令碼控制顯隱。 具體思路: 給type型別為text的輸入框加一個點選事件,點選事件是設定text型別輸入框的display為none,

程式 input(輸入) 固定在底部 獲取焦點 上推頁面

使用fixed定位將input固定在螢幕底部,同時為了不讓頁面整體上移,需要將input的adjust-position屬性設為false。 只是,這麼做的話會導致底部的輸入框也無法上移。 從而被拉起的小鍵盤蓋住。 從官方社群整理來一個方法,能夠在小鍵盤拉起的同時將底部的

[程式] 實現點選空白處隱藏評論輸入

首先在頁面底部定義一個輸入區域 , 通過自定義boolean型別變數isInput來控制評論區是否顯示 , 預設不顯示. <view class='inputArea' hidden='{{!isInput}}'> <input class

Android實現動態顯示隱藏密碼輸入的內容

本文例項展示了Android實現動態顯示或隱藏密碼輸入框內容的方法,分享給大家供大家參考之用。具體方法如下: 該功能可通過設定EditText的setTransformationMethod()方法來實現隱藏密碼或者顯示密碼。 示例程式碼如下: p

程式TabBar欄的顯示隱藏

有的時候我們可能需要將底部的TabBar隱藏起來,比如彈出分享彈出框得時候就可設定隱藏。 十分簡單,參考以下: // 顯示 wx.showTabBar({}) // 隱藏 wx.hideTabBar({}) 每個API都有動畫animation屬性,執行動畫時會留出黑塊,非常醜,選擇性使

程式】讓控制元件隱藏或者顯示

最開始寫的時候運用新增class的方法,舉例:test.wxml: <view class=" {{showOrHidden?'show':'hide'}}">+++++++++++++</view>test.wxss:.hide { displa

關於微信程式開發中的顯示個人資訊以及重置密碼功能

        最近我們學習了微信小程式中的顯示個人資訊以及重置密碼,因為是老師做好的介面,所以我們只需要搭好前臺頁面以及編寫好JS程式碼就可以了。以上是顯示個人資訊的頁面,包含了使用者的學號,姓名,系別,班級(因為是學生評教系統,所以顯示這些內容),可以通過點選重置進入到修

一、jQuery程式之jQuery效果 顯示隱藏 fading方法 滑動方法 animate()動畫方法 chaining

 隱藏和顯示: <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="htt

6位數密碼輸入

rem font box put check radius png log popu 6位數密碼輸入框 不管是PC端還是移動端,經常會有這樣的,密碼輸入框 這裏采取。6個li占位,上面覆蓋一個 input輸入框 <article class="pwd-

input type="tel" 數字輸入顯示圓點

-s div 字母 原創 view 最終 聲明 maxlength 手機 最近開發中遇到一個這樣的需求,要求input輸入框在手機端出現數字鍵盤的同時顯示圓點,試過各種方法都不太理想, 最終經過查閱大量資料後,終於實現了需求。 ●我們一般的密碼輸入框是這樣的: <i

明暗文切換(密碼輸入)遇到的坑

text 狀態 str n) ted elf ring wds lec 在做明暗文切換(密碼輸入框)的時候遇見一個坑,就是切換secureTextEntry的時候,輸入框的光標會偏移,下面列出了一個解決辦法及一種明暗文切換的方法 - (IBAction)pwdTextSwi

Python3 tkinter基礎 Entry show textvariable 密碼輸入

oot markdown imp img guid library rate lan 有助於 ? python : 3.7.0 OS : Ubuntu 18.04.1 LTS

程式輪播圖顯示三個資料

//專家團隊 getZhuanjia: function () { var that = this; app.util.request({ "url": "entry/wxapp/YuZhuanjia", success: function (res) {

自定義控制元件之 PasswordEditText(密碼輸入

前兩天在掘金上看到了一個驗證碼輸入框,然後自己實現了一下,以前都是繼承的 View,這次繼承了 ViewGroup,也算是嘗試了一點不同的東西。先看看最終效果: 事實上就是用將輸入的密碼用幾個文字框來顯示而已,要打造這樣一個東西我剛開始也是一頭霧水,不急,直接寫不會,我們可以採取曲線救

WPF 帶水印的密碼輸入實現

本章講述:帶水印的密碼輸入框實現 主要功能:帶水印效果,控制元件提示圖示,控制元件文字清除圖示; 新建一個WPF專案,然後新增“自定義控制元件(WPF)”,命名為:“ExTextBox” 資源字典XAML前臺樣式 <Style TargetType="{x:Type loc

微信程式下拉

微信小程式元件裡沒有下拉框,正好要用到,記下來以後參考 wxml程式碼 <view class='top'> <view class='top-text'> 選擇接收班級</view> <!-- 下拉框 --> <view