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

标签 jquery css forms text input

我正在慢慢但肯定地学习 jQuery,所以请原谅我的无知。我做了很多谷歌搜索,结果出现了下面的弗兰肯斯坦示例。

在此示例中,如果用户在 input 中输入“Kasey”,我希望 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>

最佳答案

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

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

FIDDLE

更新:

你可以简化代码如下

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

关于jquery - 如果输入值等于特定文本,则显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22110659/

相关文章:

加载多个动画时的jQuery无限循环

jquery - Phonegap/Iphone 与 Iframe 的问题

Django - 如何运行表单模板(获取 ' namespace not registered error ' )

安卓编程 : Background color not fully covering fragments

css - svg 伪背景图像文件未在实时站点上显示但在本地主机上工作为什么?

angular - 自定义表单控件未显示 mat-error

html - 点击标签打不开选择

javascript - 删除名称周围的字符

javascript - 试图为简单的图片库找到更好的方法

jquery - 搜索弹出图标 : Like Apple. com Angular JS