单击表单字段HTML / JQuery时显示图像

Question

使用HTML / jQuery或JavaScript在表单字段中单击时是否可以显示图像？

这是我的表格字段（在Laravel中）：

<div class="form-group">

    {!! Form::label('twitter', 'Twitter:') !!}
    {!! Form::text('twitter', null, ['class'=>'form-control']) !!}

</div>

html部分：

<a href="http://ss">
    <img width="16"
    src="https://s3.amazonaws.com/htmlsig-assets/round/twitter.png" alt="Twitter">
</a>

Answer 1

如果您正在使用引导程序，并且当您单击任何表单字段时，最初会在您的映像中保留隐藏类，从img标记中删除隐藏类。

如果你没有使用bootstrap，那么使用css就可以实现同样的目的。

假设您的锚标记隐藏了类。

$("input").on("focus", function() {
    $(a).removeClass("hidden");
 }

Answer 2

为链接指定ID，使用CSS隐藏它

#linkId { display:none }

并做

$(function() {
 $(".form-control").on("click",function() {
   $("#linkId").show();
 });
});

如果为空则删除：

$(function() {
 $(".form-control").on("focus, keyup",function() {
   $("#linkId").toggle(this.value!="");
 });
});