Question

我只想在用户在文本区域输入至少4个字符后才显示我的div id'content2'？

我正在尝试使用下面的代码，但它不起作用，请有人告诉我我哪里出错了，谢谢。

HTML：

<input type="text" id="field_post" name="vat" onfocus="document.getElementById('field_vat').style.background='#ffffff';" onkeyup="showDiv()" onchange="showDiv()"/>

使用Javascript：

<script>
$("#field_post").on('keydown', function(event) {
    var currentString = $("#field_post").val()
    $("content2").html(currentString.length);
    if (currentString.length <= 500 )  {  /*or whatever your number is*/
      display:block;
    } else {
       display:none;
    }
});
</script>

Answer 1

document.getElementById("content2").innerHTML=document.getElementById("field_post").value.length;
 if (document.getElementById("field_post").value.length >=4 )  {  /*or whatever your number is*/
      document.getElementById("content2").style.display="block";
    } else {
      document.getElementById("content2").style.display="none";
    }

Answer 2

我会使用每个人似乎忘记的input事件。当tae字符输入input而不是任何keydown时，它会触发。

$('#field_post').on('input', function () {
  var characterCount = this.value.length;
  $('#content2').text(characterCount).toggle(characterCount > 3);
});

这是一个小型演示：http://jsbin.com/qoziwoha/2/edit

Answer 3

这可以在纯JS中完成：

var field   = document.getElementById("field_post"),
    content = document.getElementById("content2");

field.onkeydown = function(){
  var len = this.value.length;
  content.innerHTML = len;

  if (len <= 4){
    content.style.display = "none";
  }else{
    content.style.display = "block";
  }
}

Answer 4

好的，关于问题：

第一个问题

$("content2").html(currentString.length);

css选择器正在寻找名为content2的元素，而你可能喜欢选择内容为2的 id 的div，所以对于碰巧，你应该写$('#content2')。如果您想选择包含类 content2的div，您可以编写$('.content2')。

第二个问题

if (currentString.length <= 500 )  {  /*or whatever your number is*/
  display:block;
} else {
   display:none;
}

在上面的代码段中，您要在display: block;中输入内容。现在这不是正确的javascript代码。您可能会对像{ display: 'block' }这样的对象语法感到困惑，但在上面的代码中，您没有包裹花括号{}来创建对象。（存在的大括号代表if () { } else { }块。

然而，真正的问题是您尝试在#content2元素上添加css样式。在这种情况下，jQuery语法是：

$('#content2').css('display', 'block');

逻辑似乎是正确的。希望这会有所帮助。

Answer 5

$("#field_post").on('keydown', function(event)
{
    var len = $(this).val().length;
    if(len >= 4)
    {
        $('#content2').text(len).show();    
    }
}

这将显示div一次，如果输入长度低于4个字符，则不会再次隐藏（根据您的问题）。为了实现这一点而改为：

$('#content2').text(len).toggle(!!len);

用户在文本区域输入文本后显示Div？

5 个答案:

第一个问题

第二个问题