OnType Javascript，但希望类型与单词匹配

我正在制作一个促销代码的输入框。我们有几个促销代码。然而，在一个促销代码中，如果用户输入springchicken，那么我需要打开它，或者切换额外的无线电输入以进行选择。可能吗？我想我可以用onType，但我真的不知道怎么写。见下面的例子。我需要它这样的东西，但键入的单词必须匹配SpringChicken。我该怎么写呢

 <input type="text" name="promo" id="promo" value="" size="22" placeholder="Enter Promo Code"  ontype="document.getElementsByClassName('promoradio')[0].style.display='block';" />

 <!--Need the following DIV to appear once "SpringChicken" is entered on the fly-->
 <div class="promoradio">
   <input type="radio" name="promopkg" value="1" /><label>Promo Package #1</label>
   <input type="radio" name="promopkg" value="2" /><label>Promo Package #2</label>
 </div>

---

尝试此jquery解决方案：已编辑，因此不区分大小写

<script type="text/javascript">
    $(document).ready(function () {

       $("#promo").keyup(function() {
           var value = $(this).val().toLowerCase();
           if (value == "springchicken") {
              $(".promoradio").show();
           } else {
              $(".promoradio").hide();
           }
       });

    });
</script>

---

这里有几件事不对

首先，javascript没有ontype事件。当按键按下时，您需要onkeypress，当按键上升时，您需要onkeyup

其次，内联javascript是一种丑陋且糟糕的做法。使用类似以下内容：

var x = document.getElementById("input element");
x.onkeyup = function() {
    var word = x.innerHTML;
    if (word.toUpperCase() === "SPRINGCHICKEN") { //if you're not worried about case sensitivity or unicode
        document.getElementsByClassName('promoradio')[0].style.display='block';
    }
}

假设类promoradio最初有display:隐藏在此处。

试试这个

<input type="text" name="promo" id="promo" value="" size="22" placeholder="Enter Promo Code"   />

 <!--Need the following DIV to appear once "SpringChicken" is entered on the fly-->
 <div class="promoradio">
   <input type="radio" name="promopkg" value="1" /><label>Promo Package #1</label>
   <input type="radio" name="promopkg" value="2" /><label>Promo Package #2</label>
 </div>



 <script>
    var textToMatch = "springchicken";
function matchWord(e){
    if(document.getElementById('promo').value.trim().toLowerCase() == textToMatch){
        document.getElementsByClassName('promoradio')[0].style.display='block';
    }else{
        document.getElementsByClassName('promoradio')[0].style.display='none';
    }
}

document.getElementById('promo').onkeyup = matchWord;
    </script>

css:

.promoradio{
 display:none;   
}

检查

---

希望有帮助。

ontype不是javascript事件。尝试按onkeypress或onkeyup不解释解决方案，-1-1再次因为jQuery在普通javascript中对于这么简单的东西来说太过分了。@RUJordan当他标记jQuery时，你是在否决一些有效的东西吗？另外，我认为keyup、show和hide都是不言自明的……如果它们是不言自明的，OP就不会问这个问题了。在我看来，当输入匹配某个单词时，你不需要一个90kb的库来显示/隐藏一个div。有没有办法使它不区分大小写？@RUJordan这个问题被标记为jQuery，这意味着他们已经在使用jQuery，在答案中使用它是绝对合理的。在不需要时添加一堆丑陋的本机DOM代码是愚蠢的。