text_field_tag（基礎欄）內的圖標

Question

我正在使用基礎欄創建註冊表單。裏面一個div：

<%= text_field_tag "password", "", placeholder: password", class:"password", required: true, type: "password" %> 
<small class="error">Invalid</small> 

我希望有一個「顯示密碼」或該領域內的圖標（右側），在點擊其中應顯示的密碼。

如何把一個字體真棒圖標裏面的text_field_tag？

Answer 1

<div class="password"> 
    <span class="fa fa-eye"></span> 
    <%= text_field_tag "password", "", placeholder: password", class:"password", required: true, type: "password" %> 
</div> 

加入CSS

.password { 
    position: relative; 
} 

.password input { text-indent: 32px;} 

.password .fa-eye { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    cursor: pointer; 
} 

添加js腳本

<script> 
    $('.password').find('.fa-eye').click(function(){ 
     $('#password').prop("type", "text"); 
    }) 
</script>