javascript - 当文本框匹配条件时显示 div

Question

当文本框的值为（作为示例）“Hello”时，我需要显示一个 div，当然它并不真正需要“Hello”，这只是一个示例。所以，对于 JavaScript，我认为我可以做到这一点，但我对 JavaScript 不是很好，需要一些帮助。

Answer 1

如果没有进一步明确您希望何时发生这种情况，我无法提供具体答案，但作为指导，以下内容就足够了：

var stringToMatch = 'hello',
    input = document.getElementById('inputElementId'),
    div = document.getElementById('divId');

input.onkeyup = function(e){
    if (this.value == stringToMatch){
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
};​

JS 小提琴演示。

如果您更喜欢不区分大小写的匹配：

var stringToMatch = 'hello',
    input = document.getElementById('inputElementId'),
    div = document.getElementById('divId');

input.onkeyup = function(e){
    if (this.value.toLowerCase() == stringToMatch.toLowerCase()){
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
};​

JS 小提琴演示。

参考：

• document.getElementById().
• element.onkeyup.
• element.style.
• string.toLowerCase().

Answer 2

也许这就是你要找的。

http://jsfiddle.net/dvZHx/

<div id="div2show">Show me</div>
<textarea id="text"></textarea>​

input = document.getElementById('text'), div = document.getElementById('div2show');

input.onkeyup = function (e) {
    if (this.value == 'hello') {
        div.style.display = 'block';
    }
};​