Question

请检查下面的代码。我想使用jquery javascript实时显示输入字符数。但问题是，当我使用“textarea”时，它可以工作，但是当我使用普通输入类型文本时，它不起作用。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
      <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>

<!-- Works  -->

<!-- <textarea></textarea>
<span id="characters"><span>

    <script type='text/javascript'>
        $('textarea').keyup(updateCount);
        $('textarea').keydown(updateCount);

        function updateCount() {
            var cs = $(this).val().length;
            $('#characters').text(cs);
        }
    </script> -->

<!-- Not works -->

<input type="text" name="name">
<span id="characters"><span>

<script type='text/javascript'>
        $('text').keyup(updateCount);
        $('text').keydown(updateCount);

        function updateCount() {
            var cs = $(this).val().length;
            $('#characters').text(cs);
        }
 </script>

</body>
</html>

Answer 1

以下是将您的两个活动keyup和keydown合并为一行的工作小提琴： - ）

您的选择器错误，text不存在。因此，我拨打input[name="name"]来获取name值的输入：

＆＃13;

$('input[name="name"]').on('keyup keydown', updateCount);

function updateCount() {
  $('#characters').text($(this).val().length);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>

＆＃13;

Answer 2

使用“textarea”版本，您可以通过$('textarea').keyup(updateCount)选择“textarea” $('textarea').keydown(updateCount)很好但是在输入文本时你选择输入文本是错误的。

我通过在输入文本上放置一个名为“foo”的id来修复它。这应该现在正在运作。

<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
    <input type="text" id="foo" name="">
    <span id="characters"><span>
    
    	<script type='text/javascript'>
            $('#foo').keyup(updateCount);
            $('#foo').keydown(updateCount);
    
            function updateCount() {
                var cs = $(this).val().length;
                $('#characters').text(cs);
            }
        </script>

Answer 3

如果您想获得带有文本类型的输入，您必须使用像这样的选择器

$('input[type="text"]').keyup(updateCount);
$('input[type="text"]').keydown(updateCount);

以下是所有jQuery selectors

的列表

Answer 4

您没有在此处选择输入字段。
请尝试以下

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers("/v2/api-docs", "/configuration/ui", "/swagger-resources/**", "/configuration/**", "/swagger-ui.html", "/webjars/**");

}

Answer 5

您可以使用解决方案https://jsfiddle.net/mLb41vpo/

＆＃13;

**kwargs

＆＃13;

$('input[type="text"]').keyup(updateCount);

function updateCount() {
    var cs = $(this).val().length;
    $('#characters').text(cs);
}

＆＃13;

错误为<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" name=""> <span id="characters"><span>，您可以使用＆＃39; text＆＃39;来引用输入文本框。

应为$('text').keyup(updateCount);

Answer 6

$("input").keyup(function(){
$("#characters").text($(this).val().length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>

Answer 7

您的代码中的所有内容都是正确的，您只需添加“：”就可以了解您的类型。这将使其识别，它是输入类型。

示例：

[HttpGet]
[ValidateRecaptcha]
public ActionResult CreateProject(CreateModel model)
{
    //your main code that needs to be done after captcha validation.
}

我只更改了你的脚本。只要找到改变，你就会得到它。

如何使用jQuery显示实时字符数？

7 个答案: