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

问题描述：

我已经搜索了许多关于在文本框的占位符中将正常的Font Awesome图标作为按钮的功能，但是我找不到解决方案。
我设计一个登录格式已经在占位符字体真棒图标为普通文本：是否可以在占位符中将字体设为真棒图标作为按钮？

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

所以我可以用这个图标，按钮，这样我就可以再添加jQuery代码稍后显示密码？

Demo - CSS and HTML code

谢谢。

请分享您的html和css代码与工作示例.. –

参考：https://codepen.io/huckbit/pen/rezezb?editors=1100#0 –

@UpendraJoshi这是我已经在我的代码，这没有使作为按钮的图标，无论如何谢谢你 –

答

按钮您可以使用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>

这正是我从很长一段时间寻找真的非常感谢你！，**。**：之前**和** z-index **都做了什么？ –

'z-index'用于可视和高阶比其他元素和'.fa：之前'用于更改图标 –

好吧，再次感谢您：D，投票:)。 –

答

这不是你如何做到的。 DIV的包装你的表单控件，并使其position: relative和里面放一个input与position: absolute; right: 0;

一个button隐藏与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>

不是我一直在寻找，但无论如何谢谢你的男人，投了赞成票:) –

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

相关推荐