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';
    }
};​