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

Question

我是 javascript 的初学者。

我正在尝试用 javascript 做一些事情。

但我最终得到了很多无效的代码

这是我的html代码

<input name="cc_number">

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

如果“cc_number 输入”中的字符数为 16，我正在尝试通过 javascript 显示它

我的想法是计算字符并在它们等于 16 时创建一个条件，然后显示 div。

但我未能构建代码。

谢谢

Answer 1

尝试在输入字段的 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>

Answer 2

你可以这样做：

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_number div以便可以更轻松地选择它。

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

Answer 3

试试这个不显眼的解决方案：

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>

jsfiddle：http: //jsfiddle.net/PhyVQ/

Answer 4

可能你最好的选择是一点 jQuery：

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

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