使用 jQuery 在 HTML 输入字段中实时检查输入/使用击键答案

【问题标题】：Checking for input live/with key strokes in HTML input field with jQuery使用 jQuery 在 HTML 输入字段中实时检查输入/使用击键
【发布时间】：2015-05-10 14:22:34
【问题描述】：

一旦字段有任何输入，我需要找到一种方法来隐藏 ID 为“忘记”的跨度。只有当字段为空时才能看到“忘记”跨度。

<form>
    <input type="text" name="username" placeholder="Username or E-mail" autofocus><br>
    <input type="password" name="password" id='pass' placeholder="Password"><br>
    <span id="forgot">( <a class="forgot" href="<?php echo $dom; ?>forgot/">forgot?</a> )</span>
    <input type="submit" value="Login">
</form>

我目前有这个脚本....

$(document).ready(function() {
    $(document).keypress(function() {
        var value=$.trim($("#pass").val());
        if (value.length==0) {
            $('#forgot').css("display","initial");
        } else {
            $('#forgot').css("display","none");
        }
    }
});

有没有更好的方法来检查用户的实时输入并让它运行一个函数？

【问题讨论】：

定义“更好的方式”。

标签： jquery html forms field live

【解决方案1】：

 $(document).ready(function() {
    $(document).on('keypress', '#pass', function() {
        var value = $(this).val();
        if (value.length) {
            // $('#forgot').css("display", "block");
            // Or
            $('#forgot').show();
        } else {
            // $('#forgot').css("display", "none");
            // Or
            $('#forgot').hide();
        }
    });
});

您不应该在 document 添加事件，而是添加 pass
使用show/hide函数
使用display:block 而不是initial
无需与==0比较

【讨论】：

那会是$('#pass').on('keypress'... ?? 使用initial有什么作用？
@EnayetHussain 两者都是一样的，但如果你动态添加pass，它将不起作用。添加以防万一。
我似乎无法让代码工作。该网站在enayet.co.uk/login 上直播，如果您能看一下，我将不胜感激
@EnayetHussain 你是否在实时网站上添加了代码
是的，它在该页面上可见。我把它放在脚本标签里。

【解决方案2】：

$(document).on('input', '.Required', function(){
    var required = false;
    var elems = $('.Required');
    for(var i in elems){
    if($(elems[i]).val() == ''){
       required = true;
    }
}
if(required){
  $('#forgot').show();
}else{
  $('#forgot').hide();
}

 });

在我的手机上并且未经测试。将必需类添加到输入字段中。它应该显示任何具有该类名称的字段。

【讨论】：