Question

我的表格有点问题。我想让用户下载一个Presskit.zip文件。

但在他们下载之前，他们必须输入“＆gt; presskit＆＃39;在输入文本中。

如果单词＆＃39; presskit＆＃39;是正确的，然后我想在下载按钮中添加一个类。

但它似乎没有用。有人可以告诉我我做错了吗？

我希望有人可以帮助我:)。

谢谢。

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

您现在尝试以这种方式创建演示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您希望 大写和小写 presskit或PRESSKIT，请使用此脚本< / p>

$('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');  
});

jQuery - 如果输入文本等于answer，则添加类

3 个答案: