Heim > Artikel > Web-Frontend > vue und jquery überwachen die gemeinsame Nutzung von Benutzereingabestatuscodes in Echtzeit
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里的值 $('#userName').on('input propertychange',function(){ if(this.value.length != 0){ $('#login').removeClass('disabled'); }else{ $('#login').addClass('disabled'); } });
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
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!