jQuery - Добавить класс, если текст ввода равен

Question

У меня проблема с моей формой. Я хочу, чтобы пользователи загружали файл Presskit.zip.

Но прежде чем они смогут скачать его, они должны ввести слово «пресс-кит» во входной текст.

Если слово «presskit» верное, тогда я хочу добавить класс к кнопке загрузки.

Но, похоже, он не работает. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно?

Here's a example:

Я надеюсь, что кто-то может помочь мне :)

Спасибо.

HTML

<a href="test.zip" class="btn" download="download">Download Presskit</button> 

CSS

.btn { 
    display:block; 
    float:left; 
    padding: 20px; 
    text-decoration: none; 
    text-align:center; 
    background-color: #eee; 
    color: #fff; 

    pointer-events: none; 

    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

.btn.active { 
    -webkit-user-select: all; 
    -moz-user-select: all; 
    -ms-user-select: all; 
    user-select: all; 
    background-color: #34495e; 

    pointer-events: all; 
} 
input { 
    display: block; 
    float: left; 
    padding: 22px; 
} 

Answer 1

Привет теперь попробуйте таким образом я создаю демку.

$('input').on('keyup',function() { 
 
    if($(this).val()=='PRESSKIT'){ 
 
     $('.btn').addClass('active'); 
 
    }else{ 
 
     $('.btn').removeClass('active'); 
 
    } 
 
});

.btn { 
 
    display:block; 
 
    float:left; 
 
    padding: 20px; 
 
    text-decoration: none; 
 
    text-align:center; 
 
    background-color: #eee; 
 
    color: #fff; 
 

 
    pointer-events: none; 
 
    
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.btn.active { 
 
    -webkit-user-select: all; 
 
    -moz-user-select: all; 
 
    -ms-user-select: all; 
 
    user-select: all; 
 
    background-color: #34495e; 
 
    
 
    pointer-events: all; 
 
} 
 
input { 
 
    display: block; 
 
    float: left; 
 
    padding: 22px; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<form action=""> 
 
    <input type="text" class="field-txt" placeholder="Type “PRESSKIT” to start the download.." /> 
 
</form> 
 

 
<a href="test.zip" class="btn" download="download">Download Presskit</button>

, если вы хотите быть какпрописные и строчнымиpresskit или PRESSKIT, чем использовать для этого сценария

$('input').on('keyup',function() { 
    if(($(this).val()=='PRESSKIT') || $(this).val()=='presskit'){ 
     $('.btn').addClass('active'); 
    }else{ 
     $('.btn').removeClass('active'); 
    } 
}); 

Answer 2

Try this 
$('input').keyup(function() { 
if($(this).val()=="presskit"){ 
    $('.btn').toggleClass('active');} 
}); 

Answer 3

вы можете сравнить текст, а затем Позвольте пользователю загрузить ссылку. пожалуйста, посмотрите ниже код.

$('input').on('blur, keyup', function() { 
if($(this).val()=='PRESSKIT' && $(this).val()!='') 
$('.btn').toggleClass('active'); 
else 
$('.btn').removeClass('active'); 
});