如果输入值等于特定文本,则显示div

use*_*388 3 css forms jquery text input

我正慢慢地学习jQuery,所以请原谅我的无知.我做了很多谷歌搜索,导致下面的弗兰肯斯坦例子.

在这个例子中,如果用户输入"Kasey" input,我希望div#pete有display:block.

提前致谢!

<!DOCTYPE html>
<html>
<head>

<script>
$(document).ready(function(){ 
var val = $("#fname").length;
if (val = Kasey) {
        $("#pete").css("display", "block");
    } 
</script>
</head>
<body>

<p>Name: <input type="text" id="fname"></p>
<p id="pete" style="display:none;" >Pete</p>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Pra*_*lan 8

您可以使用keyup()处理程序来监听keyup事件.在里面this.value用来获取价值

$(document).ready(function() {
    $("#fname").keyup(function() {
        if (this.value == "Kasey") {
            $("#pete").css("display", "block");
        }
        else {
            $("#pete").css("display", "none");
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

FIDDLE

更新:

您可以按如下方式简化代码

$(document).ready(function () {
    $("#fname").keyup(function () {
        $("#pete").css("display", this.value == "Kasey" ? "block" : "none");
    });
});
Run Code Online (Sandbox Code Playgroud)