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

Display image on click in form field HTML / JQuery

本文关键字：单击 显示 显示图 图像 JQuery 表单 字段 HTML      更新时间：2023-09-26

当我使用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>

给链接一个ID，使用CSS 隐藏它

#linkId { display:none }

并进行

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

如果为空，要删除：

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

如果您使用bootstrap，并在单击任何表单字段时从img标记中删除隐藏类，则最初将隐藏类保留在图像中。

若你们并没有使用bootstrap，那个么同样可以使用css来实现。

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

$("input").on("focus", function() {
    $(a).removeClass("hidden");
 }
相关文章：