text_field_tag 里面的图标 (foundation-rails)
Icon inside text_field_tag (foundation-rails)
我正在使用 foundation-rails 创建注册表单。在 div 内:
<%= text_field_tag "password", "", placeholder: password", class:"password", required: true, type: "password" %>
<small class="error">Invalid</small>
我想要一个 "show password" 或此字段内的图标(在右侧),单击它应显示密码。
如何在 text_field_tag 中放置一个很棒的字体图标???
<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>
我正在使用 foundation-rails 创建注册表单。在 div 内:
<%= text_field_tag "password", "", placeholder: password", class:"password", required: true, type: "password" %>
<small class="error">Invalid</small>
我想要一个 "show password" 或此字段内的图标(在右侧),单击它应显示密码。
如何在 text_field_tag 中放置一个很棒的字体图标???
<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>