是否可以將Awesome字體圖標作為占位符中的按鈕？

Question

我搜索了很多有關在文本框的占位符中將普通的Font Awesome圖標制作為按鈕的方法，但是我找不到解決方案。
我設計了一個登錄表單，在占位符中已經有一個Font Awesome圖標作為普通文本：

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

所以我可以使用此圖標作為按鈕，以便稍后添加Jquery代碼以顯示密碼嗎？

演示-CSS和HTML代碼

謝謝。

Answer 1

您可以使用position: absolute a標簽

 $(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; 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>