如何在文本框中插入的用户插入值之后显示另一个文本框

Question

我的任务是使用户将其年龄插入文本框中。如果他们的年龄超过18岁，它将出现另一个文本框。

是否有可能做到这一点？

<label>Age: <span class="required">* </span></label>
<input type="text" id="age" name="age" placeholder="">
<div style="display: none" id="age1">
  <label control-label ">Another textbox: </label>
       <input type="text "   name=" " value=" " name=" " >	
    </div>

Answer 1

您可以尝试一下，

$('#age').change( function() {
  if ($(this).val() > 18) {
    $('#age1').css('display','block');
  } else {
    $('#age1').css('display','none');
  }
});

Answer 2

您有几个HTML标记错误，我在下面的摘要上进行了更正。

使用focusout，并检查给定的年龄是否是数字，如下：

：

$("#age").focusout(function() {
  let age = $(this).val();
  if (/^[0-9]+?$/.test(age) && age >= 18) // check RegEx match only number (age)
    $("#age1").show();
  else
    $("#age1").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Age: <span class="required">* </span></label>
<input type="text" id="age" name="age" placeholder="" />
<div style="display: none" id="age1">
  <label control-label>Another textbox: </label>
  <input type="text " name=" " value=" " name=" " />
</div>

Answer 3

只需将onchange函数添加到年龄：

<input type="text" id="age" name="age" onchange="addInput(this.value)" placeholder="">
<script>
  function addInput(age) {
    var value = parseInt(age);
    if (value > 18) {
      document.getElementById("age1").style = "display:block";
    } else {
      document.getElementById("age1").style = "display:none"
    }
  }
</script>

Answer 4

请尝试此代码。我添加了代码，以便如果将值更改为小于18。它再次设置要显示的属性：无。

 $('#age').keyup(function(){
 if ($('#age').val() >= 18)
 {
 ('#age1').css('display','block');
 }
 else
 {
 $('#age1').css('display','none');
 }
});

另外，您在此代码中有一些错误： -

<label control-label>Another textbox: </label>

我认为您应该在控制标签之前添加类属性。

Answer 5

您可以使用您的HTML编写以下jQuery事件，它将起作用：

$("#age").keyup(function(){
  if($(this).val() > 18){
    $("#age1").show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label >Age: <span class="required">* </span></label>
<input type="text" id="age" name="age" placeholder="">
<div style="display: none;" id="age1">
   <label  control-label">Another textbox: </label>
   <input type="text"   name="" value="" name="" >  
</div>

您也可以无需jQuery即可(仅使用JS，它更快，因为它不需要任何库即可首先加载(。在这里，我在输入字段中添加了onkeyup属性#age，并且myFunction()工作相同。

function myFunction() {
  if (document.getElementById("age").value > 18) {
    document.getElementById("age1").style.display = "block";
  }
}

<label>Age: <span class="required">* </span></label>
<input type="text" id="age" name="age" placeholder="" onkeyup="myFunction();">
<div style="display: none;" id="age1">
  <label control-label ">Another textbox: </label>
   <input type="text "   name=" " value=" " name=" " >  
</div>