Heim  >  Artikel  >  Web-Frontend  >  vue und jquery überwachen die gemeinsame Nutzung von Benutzereingabestatuscodes in Echtzeit

vue und jquery überwachen die gemeinsame Nutzung von Benutzereingabestatuscodes in Echtzeit

小云云
小云云Original
2018-02-08 13:17:571756Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit vue und jquery den Benutzereingabestatus in Echtzeit überwachen. Der Effekt besteht darin, dass die Schaltfläche deaktiviert ist . Ich hoffe, es kann Ihnen helfen.

Erfolgseffekt: Eingabewert wird nicht eingegeben, Schaltfläche ist deaktiviert

jquery-Operationscode:

html


<input type="text" name="" placeholder="请输入用户名" id="userName" >
 <button class="disabled" id="login">登录</button>

css


 .disabled {
  pointer-events: none;//禁用点击事件
  cursor: default;//鼠标禁用
  opacity: 0.4;
  }

js


//监听input里的值
$(&#39;#userName&#39;).on(&#39;input propertychange&#39;,function(){
   if(this.value.length != 0){
      $(&#39;#login&#39;).removeClass(&#39;disabled&#39;);
   }else{
      $(&#39;#login&#39;).addClass(&#39;disabled&#39;);
   }
 });

Vue-Operationscode :

html


<template>
  <p>
       <input type="text" placeholder="请输入用户名" v-model="userName"> 
      <button :disabled="forbidden" >登录</button>  
  </p>
</template>

js


export default{
  data(){
     return{
       forbidden:false,
       userName:null
     }
  },
  methods:{
     if(this.userName == null){
       this.forbidden = true;
     }else{
       this.forbidden = false
     }
  }
}

Verwandte Empfehlungen :

Instanz der JQuery-Überwachung des Eingabewerts in Echtzeit

Oninput- und Onpropertychange-Methoden von JS und JQuery, die den Eingabefeldwert in Echtzeit überwachen

JS-Methode zur Überwachung des Textfeldstatus in Echtzeit_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonvue und jquery überwachen die gemeinsame Nutzung von Benutzereingabestatuscodes in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn