Question

我只有2天进入jquery所以我可能在这里犯了一个简单的错误。基本上我有一个输入字段，当点击它时会在它周围获得一个蓝色边框（通过将css类添加到keyup上的输入字段并且css添加边框颜色来实现此目的）。在keyup上，提交按钮也会显示。我唯一想要的是显示剩余的字符数。除了最后一部分，其他一切都有效。这是我的所有代码：

<style type="text/css">.onFocus { border:3px solid #BBDAFD; }</style>

<script type="text/javascript">
    $(document).ready(function(){

        $('.submitButton').hide();
        $('.remaining').hide();

        var typed = $('input1').val();

        $('.input1').keyup(function(){
            $('.input1').addClass('onFocus');
            $('.submitButton').show();
            $('.remaining').show().html(150 - typed);
        });

    });
</script>

<form action="submitComment.php" name="" method="post">
    <label>Leave a comment</label>
    <input type="text" class="input1" maxlength="150" />
    <br />
    <span class="remaining"></span>
    <br />
    <input type="button" name="commentSubmit" value="Submit Comment" class="submitButton" />
</form>

而不是从应该存储在变量“typed”中的输入字段的当前值执行操作150（我想要允许的最大字符限制），而不是jquery只是拆分：

的NaN

这里有什么问题/解决方案？

修改

Opps，只是注意到了这一点：

var typed = $('input1').val();

应该是：

var typed = $('.input1').val();

现在NAN不会显示150个节目。因此，该操作仍未执行。

Answer 1

此：

    var typed = $('input1').val();

    $('.input1').keyup(function(){
        $('.input1').addClass('onFocus');
        $('.submitButton').show();
        $('.remaining').show().html(150 - typed);
    });

需要看起来像这样：

    $('.input1').keyup(function(){
        $(this).addClass('onFocus');
        $('.submitButton').show();
        $('.remaining').show().html(150 - this.value.length);
    });

检查keyup处理程序中当前值非常重要，否则您始终会检查document.ready上的值长度。

Answer 2

将此作为keyup事件处理程序的第一行

var typed = $('.input1').val().length;

并从上方删除var typed...。

更改

您希望每次输入值更改时计算typed，而不是在加载页面时计算一次。
您错过了选择器中的一个点（'input1'）
使用length函数获取输入大小

修改
尼克克拉弗发布了一个更好的方法来做到这一点，我把它留在这里只是为了指出错误。

Answer 3

首先：

var typed = $('input1').val();

应该是：

var typed = $('.input1').val();

第二

如果您要尝试输入多少个字符，则应该使用：

var typed = $('.input1').val().length;

Answer 4

问题在于你有效地试图减去“150 - 无论我输入什么”。所以它正在吐出NaN或Not a Number。你想要长度，没有实际价值。

var typed = $('.input1').val().length; // This will have the actual text

$('.remaining').show().html(150 - typed.length); // (150 - 24) as an example

为什么这个简单的jQuery代码不起作用？

修改

4 个答案: