是否可以在占位符中将字体Awesome图标设为按钮？

Question

我已经搜索了很多关于在文本框的占位符中将普通的Font Awesome图标设为按钮，但我无法找到解决方案。
我设计了一个登录表单在占位符中已经有一个Font Awesome图标作为普通文本：

<input class="form-control" type="password" placeholder='Password  &#xf070;'/>

那么我可以使用此图标作为按钮，以便我可以添加Jquery代码以便稍后显示密码吗？

Demo - CSS and HTML code

谢谢。

Answer 1

您可以将a标记用于position: absolute

$(document).ready(function(){
  $('.hide-password').click(function(){     
     $(this).toggleClass('show');
  });
});

.hide-password {
    position: absolute;
    right: 5px;
    top: 6px;
    z-index: 10;
    color: #666;
}
.hide-password.show .fa:before {
    content: "\f06e";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 <div class="col-sm-4">
   <form class="">
    <div class="form-group">
      <label class="sr-only" for="exampleInputUser">User</label>
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-user"></i></div>
        <input type="text" class="form-control" id="exampleInputUser" placeholder="User Name">      
      </div>
    </div>
    <div class="form-group">
      <label class="sr-only" for="exampleInputPwd">Password</label>
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-key"></i></div>
        <input type="text" class="form-control" id="exampleInputPwd" placeholder="Password">
        <a href="javascript:void(0)" class="hide-password"><i class="fa fa-eye-slash"></i></a>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign Up</button>
  </form>
 </div>

Answer 2

那不是你怎么做的。使用div包装您的表单控件并将其设为position: relative并在内部添加input和button position: absolute; right: 0;

使用if($('input').val().length > 0) { $('button').addClass('hidden')}

隐藏按钮

<style>
    .input-wrap {position: relative}
    .input-wrap > button {position: absolute; right: 0;}
</style>
<script>
    $('.input-wrap input').on('keyup', function() {
        if($(this).val().length > 0) $(this).next().addClass('hidden');
        else $(this).next().removeClass('hidden');
    });
</script>
<div class="input-wrap">
    <input class="form-control" placeholder="your awesome placeholder">
    <button onclick="togglePassVisible()">&#xf070;</button>
</div>