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

Question

I've search alot about making normal Font Awesome icon as button in a textbox's Placeholder , but i couldn't find the solution.
I've designed a login Form has already a Font Awesome icon in placeholder as normal text :

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

So can i use this icon as button so i can add then Jquery code to show the password later?

Demo - CSS and HTML code

Thank you.

Answer 1

You can used a tag with 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

That's not how you do it. Wrap your form control with div and make it position: relative and inside put an input and a button with position: absolute; right: 0; position: absolute; right: 0;

Hide the button with 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>