Question

为什么隐藏的表单在失去焦点时不显示？离开输入时警报很快就会出现，但其他隐藏的形式仍然存在。

HTML

<body>
   <input type="text" id="myinput" value="">
   <input type="hidden" id="validation_message_email" value="enter a valid email">
</body>

的javascript

window.onload = function() {
   $("#myinput").blur(myAlert);
};

function myAlert() {
   alert("This input field has lost its focus.");
   $("#validation_message_email").show();
}

Answer 1

您无法显示类似的隐藏输入。范围更适合此目的，

<input type="text" id="myinput" value="">
<span style="display:none"  id="validation_message_email">enter a valid email</span>

Answer 2

validation_message_email没有将display样式属性设为none，因此show（）不会显示type="hidden"。

您需要替换

$("#validation_message_email").show();

与

$("#validation_message_email").attr( "type", "text" );

但是，如果的目的是仅显示消息，那么您就不需要使用隐藏的输入。

<body>
   <input type="text" id="myinput" value="">
</body>

和

window.onload = function() {
   $("#myinput").blur(function(){
      alert("This input field has lost its focus.");
      $(this).append('<span id="emailValidationMessage">enter a valid email</span>')
   });
   $("#myinput").focus(function(){
      $("#emailValidationMessage").remove();
   });
};

Answer 3

无需使用type="hidden"，因为默认情况下隐藏的元素不是display:none。

使用type="text"并使用css隐藏它并显示您想要的位置

<input type="text" id="myinput" value="" style="display:none;">

Answer 4

像这样使用

<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">

<script>   
window.onload = function() {
    $("#myinput").blur(myAlert);
};

function myAlert() {
   $("#validation_message_email").attr("type","text");
}
</script>

Answer 5

JSfiddle link

检查此jsfiddle链接，它可能会对您有所帮助

https://jsfiddle.net/PunitSoniME/pe8f7k5r/

显示隐藏的输入javascript / jquery

6 个答案: