vue 및 jquery는 사용자 입력 상태 코드 공유를 실시간으로 모니터링합니다.

이 글에서는 주로 vue와 jquery를 사용하여 사용자 입력 상태를 실시간으로 모니터링하는 방법을 공유합니다. 입력 값이 입력되지 않으면 버튼이 비활성화되는 효과가 있습니다. 구체적인 작업 코드는 이 글을 참조하세요. .그것이 당신에게 도움이 되기를 바랍니다.

성취 효과: 입력 값이 입력되지 않고 버튼이 비활성화됩니다.

jquery 작업 코드:

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 작업 코드:

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
     }
  }
}

관련 권장 사항:

입력 값 예제의 Jquery 실시간 모니터링

js 및 onprop의 jquery 실시간 모니터링 ertychange 방법 입력 상자 값

js 실시간으로 텍스트 상자 상태를 모니터링하는 방법_javascript 기술

위 내용은 vue 및 jquery는 사용자 입력 상태 코드 공유를 실시간으로 모니터링합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!