Javascript 如何基于Laravel 4中的其他文本框隐藏/显示文本框？

目标

• 当用户开始编辑电子邮件部分时显示

  电子邮件确认

• 隐藏

  电子邮件确认

  文本框（如果用户未触摸）
• 如果用户只编辑用户名部分，请不要执行任何操作

编辑表单

• 用户名*\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

• 电子邮件*\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

• 电子邮件确认*\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

HTML/BLADE

    <div class="form-group">
    <label class="col-sm-3 control-label required ">Username </label>
    <div class="col-sm-9 form-group float-label-control ">


            {{ Form::text('username',  isset($user->username) ? $user->username : '' , array('id'=>'form-field-icon-2')); }}

    </div>
</div>
<div class="form-group">
    <label class="col-sm-3 control-label required ">Email </label>
    <div class="col-sm-9 form-group float-label-control ">


            {{ Form::text('email', isset($user->email ) ? $user->email  : '' , array('id'=>'form-field-icon-2')); }}

    </div>
</div>

用户名
{{Form:：text（'username'，isset（$user->username）？$user->username:''，数组（'id'=>'Form-field-icon-2'）；}
电子邮件
{{Form:：text（'email'，isset（$user->email）？$user->email:''，数组（'id'=>'Form-field-icon-2'）；}

说这是你的HTML-

<input type="text" name="username">
<input type="text" name="email" id="email">
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">

<script>
// Use jQuery event handlers
$('#email').on('input', function (event) {
  var text = $(this).val();

  if (text === '') { // If email is empty
    $('#email-conf').prop('disabled', true);
  } else {
    $('#email-conf').prop('disabled', false);
  }
});

</script>

//使用jQuery事件处理程序
$（'#email'）。关于（'input'，函数（event）{
var text=$（this.val（）；
如果（文本==''）{//如果电子邮件为空
$（'#email conf'）.prop（'disabled'，true）；
}否则{
$（'#email conf'）.prop（'disabled'，false）；
}
});

---

p.S.-您可以切换隐藏/显示，而不是禁用。如果您不想编写函数，内联javascript可能是一个优雅的解决方案。 onkeyup和onkeydown事件将完成这项工作，您不需要jQuery

<form>
   <p>
     <label for="email">Email</label>
     <input type="text" name="email" id="email" onkeyup="this.parentNode.nextElementSibling.style.display = 'block';" onkeydown="this.parentNode.nextElementSibling.style.display = 'none';"/>
   </p>
   <p id="confirm-email">
     <label for="confirm">Confirm email</label>
     <input type="text" name="confirm" id="confirm"/>
    </p>
</form>

示例：

HTML

<label> Username </label><br>
<input type="text" name="username"><br>

<label> Email </label><br>    
<input type="text" name="email" id="email"><br>

<label id="l-email-conf" > Email Confirm </label><br> 
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">

---

搜索jquery.keyup.keydown以及如何使用它。如果您有当前的HTML代码，可以显示给我吗？在HTML/Blade部分。它不起作用。请参见，电子邮件确认文本框始终处于禁用状态。请澄清。@evoque2015看起来我迟到了：（更新了答案。必须使用.val（）而不是.text（）我们可以在线完成这项工作很酷。根据你的JSFIDLE，当我在电子邮件中编辑某个内容时，我看到一个新框，但当我单击它时，它就消失在我身上。你能检查一下吗？谢谢，太好了。谢谢你帮我修复它。

<label> Username </label><br>
<input type="text" name="username"><br>

<label> Email </label><br>    
<input type="text" name="email" id="email"><br>

<label id="l-email-conf" > Email Confirm </label><br> 
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">

$('#l-email-conf').hide();
$('#email-conf').hide();

$('#email').on('input', function (event) {
  var text = $(this).val();

  if (text === '') { // If email is empty
    $('#email-conf').prop('disabled', true);
  } else {
    $('#email-conf').prop('disabled', false);
      $('#email-conf').show();
      $('#l-email-conf').show();
  }
});