zoukankan      html  css  js  c++  java
  • E积分项目总结(绑卡页 第一步)

    绑卡页bind-card.vue(输入框只能输入数字和字母,最多16位)

    v-model 数据双向绑定  输入框

    <input id="ipt" class="ipt-ipt" type="text" maxlength="16" name="pasww" v-model="formInline.pasw" placeholder="输入卡密码" @keyup="checkPhone()" @blur="showClean" @focus="checkPhone" />

     “绑定”按钮       isActive 是true时,添加active样式,否则不添加。

    <button type="button" class="bind-btn"  @click="getStyleData" :class="{'active':isActive}">绑定</button>
    

      

    data里要初始化formInline

    data(){
      return{				
    	// 对方手机号
    	formInline:{
    	  pasw:''
    	},
         // 是否显示清除icon
    isShow:false,

        // 按钮效果
        isActive:false,

    }
    },    
    

    校验输入框内输入的文字,小于16位时按钮是灰色,达到16位时按钮变红,只要输入框输入文字,右侧关闭的小叉叉按钮就显示,点击就可以清空内容。

    checkPhone() {
    				//正则 只能输入字母和数字
    				let that = this
                             that.formInline.pasw=that.formInline.pasw.replace(/[^w]/g,'')
    
    				var lengthPasw = this.formInline.pasw.length;
    				//  输入框字符长度>=1 清除icon显示,否则不显示
    				if(lengthPasw >= 1) {
    					//isShow是右侧清除文字的小图标
    					this.isShow = true
    				} else {
    					this.isShow = false
    				}
    				//  输入框输入够16位按钮可点击 否则不可点击
    				if(lengthPasw == 16) {
    					//按钮可用且变红
    					this.isActive = true;
    
    				} else {
    					this.isActive = false;
    				}
    			},
    

      

    点击右侧小叉叉,清除输入框内文字,但是不失去焦点,键盘仍然停留在操作页面。

    // 点击叉叉 时清除密码
    		    cleanAll(){
    			  // console.log('cleanAll')
    		      // 清除手密码
    		      this.formInline.pasw= ''
    		      // 按钮置灰不可点击
    		      this.isActive = false
    		      // 清除按钮消失
    		      this.isShow = false
    		      $('.ipt-ipt').focus();
    		     
    		    },
    

      

    失去焦点时

    // 失去焦点 清除icon不显示
    showClean(){
        this.isShow = false
     },
    

      

  • 相关阅读:
    什么是Shader
    [Tip: Interface Implementation]
    Focus在某一领域的软件开发 + 在那一领域无限扩展视野
    [Tip: VS]Several IDE Tips and Tricks
    [Tip C# collection]List<Employee> or EmployeeList?
    [Tip Regular expression]Test Regular Expressions With The Regulator
    VS2005设计智能客户端(轉)
    第1章 本书会讨论什么内容
    [导入]关于Sprite.Draw2D
    C#面試(轉)
  • 原文地址:https://www.cnblogs.com/ourLifes/p/8580279.html
Copyright © 2011-2022 走看看