显示隐藏的输入 javascript/jquery答案

【问题标题】：Show hidden input javascript/jquery显示隐藏的输入 javascript/jquery
【发布时间】：2016-06-01 12:43:08
【问题描述】：

为什么失去焦点时隐藏的表单不显示？离开输入时警报会很好地出现，但另一个隐藏的表单仍然不存在。

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();
}

【问题讨论】：

它的隐藏元素通知type="hidden"我觉得你需要<span style="display:none" id="validation_message_email">enter a valid emai</span>
你为什么把“validation_message_email”隐藏了？
type='hidden' 并不直接暗示该元素是隐藏的，这意味着控件本身是一种称为“隐藏”的类型。您无法更改它，因此建议您使用<div>或<span>标签，最初将css设置为display:none，然后在元素上调用jquery show()函数。

标签： javascript jquery html

【解决方案1】：

您不能像那样显示隐藏的输入。跨度将更适合此目的，

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

【讨论】：

确实如此。 <input> 应该用于从用户那里获取输入，而不是用于显示消息。
你应该以style="display:none" 开头，否则不需要.show()
@Satpal 感谢您的建议。刚刚编辑了答案。

【解决方案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();
   });
};

【讨论】：

【解决方案3】：

不需要使用type="hidden"，因为隐藏元素不是display:none，它们默认是隐藏的。

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

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

【讨论】：

【解决方案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>

【讨论】：

虽然这个代码块可能会回答这个问题，但最好能稍微解释一下为什么会这样。

【解决方案5】：

 <div class="form-group" id="usernamediv">

 <input class="form-control" name="username" id="username"
     placeholder="Username" type="text"  required=""> </div>
 <div class="form-group" id="passworddiv">
  <input name="password" class="form-control" id="password" placeholder="Password"  type="password" required="">
  </div>
<button id="#loginButton">Login</button>
<button id="#forgotpassword">Forgot Password</button>


<script>
$("#forgotpassword").hide();
$("#forgotpassword").click(function(e){
$("#loginButton").hide();
$("#usernamediv").show();
$("#passworddiv").hide();
})


</script>

【讨论】：

虽然这个代码块可能会回答这个问题，但最好能稍微解释一下为什么会这样。

【解决方案6】：

检查this jsfiddle link，它可能会帮助你。

$("#myinput").blur( function(){

myAlert();

});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">

【讨论】：

虽然这个代码块可能会回答这个问题，但最好能稍微解释一下为什么会这样。