php - 是否可以将 font 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>