Javascript 如果数字计数等于16，则显示html div（cc验证）

我是javascript的初学者

我正在尝试用javascript制作一些东西

但我最终得到了很多不工作的代码

这是我的html代码

<input name="cc_number">

<div id="hidee" style="display:none">
<input name="cvv2">
</div>

如果“cc_number input”中的字符数是16，我试图用javascript显示它

我的想法是计算字符数，如果它们等于16，则设置一个条件，然后显示div

但是我没能构建代码

---

谢谢

也许你最好的选择是一个小小的jQuery：

$('input[name="cc_number"]').on('keyup', function() {
    if($(this).val().length==16){
        $('#hidee').show();
    } else {
        $('#hidee').hide();
    }
});

---

它只附加了一个侦听器（示例中为keyup），并在该事件上检查值的长度。

您最好的选择可能是使用一个小jQuery：

$('input[name="cc_number"]').on('keyup', function() {
    if($(this).val().length==16){
        $('#hidee').show();
    } else {
        $('#hidee').hide();
    }
});

---

它只附加了一个侦听器（示例中为keyup），并在该事件上检查值的长度。

尝试在输入字段的keyup上挂接一个处理程序：

<input name="cc_number" onkeyup="showDiv(this)">

<div id="hidee" style="display:none">
<input name="cvv2">
</div>

<script>
  function showDiv(src) {
    document.getElementById("hidee").style.display =
      src.value.length==16 ? "block" : "none";
  }
</script>

函数showDiv（src）{
document.getElementById（“hidee”）.style.display=
src.value.length==16？“块”：“无”；
}

尝试在输入字段的键控上挂接处理程序：

<input name="cc_number" onkeyup="showDiv(this)">

<div id="hidee" style="display:none">
<input name="cvv2">
</div>

<script>
  function showDiv(src) {
    document.getElementById("hidee").style.display =
      src.value.length==16 ? "block" : "none";
  }
</script>

函数showDiv（src）{
document.getElementById（“hidee”）.style.display=
src.value.length==16？“块”：“无”；
}

您可以这样做：

var number = document.getElementById('cc_number');
var hidee = document.getElementById('hidee');

number.onkeyup = function () {
    if (this.value.length >= 16)
        hidee.style.display = 'block';
    else
        hidee.style.display = 'none';
};

我还将

id

添加到了您的

cc\u编号

div

中，这样可以更容易地选择它

<input id="cc_number" name="cc_number">

---

您可以这样做：

var number = document.getElementById('cc_number');
var hidee = document.getElementById('hidee');

number.onkeyup = function () {
    if (this.value.length >= 16)
        hidee.style.display = 'block';
    else
        hidee.style.display = 'none';
};

我还将

id

添加到了您的

cc\u编号

div

中，这样可以更容易地选择它

<input id="cc_number" name="cc_number">

试试这个非突兀的解决方案：

Javascript：

document.getElementsByName("cc_number")[0].onkeyup = function(){
    if(this.value.length>=16)
        document.getElementById("hidee").style.display ="block";
    else
        document.getElementById("hidee").style.display ="none";
}

<input name="cc_number" />

<div id="hidee" style="display:none">
    <input name="cvv2" />
</div>

标记：

document.getElementsByName("cc_number")[0].onkeyup = function(){
    if(this.value.length>=16)
        document.getElementById("hidee").style.display ="block";
    else
        document.getElementById("hidee").style.display ="none";
}

<input name="cc_number" />

<div id="hidee" style="display:none">
    <input name="cvv2" />
</div>

jshiddle：

试试这个非突兀的解决方案：

Javascript：

document.getElementsByName("cc_number")[0].onkeyup = function(){
    if(this.value.length>=16)
        document.getElementById("hidee").style.display ="block";
    else
        document.getElementById("hidee").style.display ="none";
}

<input name="cc_number" />

<div id="hidee" style="display:none">
    <input name="cvv2" />
</div>

标记：

document.getElementsByName("cc_number")[0].onkeyup = function(){
    if(this.value.length>=16)
        document.getElementById("hidee").style.display ="block";
    else
        document.getElementById("hidee").style.display ="none";
}

<input name="cc_number" />

<div id="hidee" style="display:none">
    <input name="cvv2" />
</div>

---

jshiddle：

你能告诉我们你到目前为止都做了些什么吗？我们不会为您编写代码。您的标记是错误的。没有结束标记，字段上没有输入类型，命名也不好。@phobos这只是一个例子，我的代码太长&太复杂了。你能告诉我们你尝试了什么吗？我们不会为您编写代码。您的标记是错误的。没有结束标记，字段上没有输入类型，命名也不好。@phobos这只是一个例子，我的代码太长&complexI没有否决，但是如果问题没有标记/或提到jQuery，只使用纯javascript答案（记住不是每个人都使用jQuery），我没有否决，但是如果问题没有标记/或提到jQuery，只使用简单的javascript答案（记住不是每个人都使用jQuery）