在输入框加入搜索图标的问题

迷南。 2021-11-02 08:42 412阅读 0赞

最近遇到了一个需要在搜索框内加入一个放大镜图标的需求，就像是这样。

![2019081309431190.png][]

这个本来是挺好解决的一个问题，只要在搜索框内加两句

background-image: url('../Imgry/fangdajing.png');
    background-repeat:no-repeat;/*图标是否重复*/

就可以了。都是现在的问题是图标并不是在边缘(网上搜索了下大部分都是在最左或者最右)，所以必须要解决好图标定位的问题，想了很久也没啥很好的办法，最后只能用百分比的定位来暂时解决这个问题，但是用百分比的话有一个问题，就是在响应式的布局里，一旦比例发生改变，图标与文字之间的距离也会发生变形。

![20190813094728582.png][]![20190813094753896.png][]

例如这是不同比例下的图标位置。

.bady1-block1{
        width: 100%;
        height:4.8rem;
        background:rgba(255,255,255,1);
        padding: 1rem;
    }
    .bady1-block1-input{
        width:100%;
        height:3rem;
        background:rgba(241,241,241,1);
        border-radius:0.4rem;
        text-align: center;
        font-size:1.3rem;
        font-weight:400;
        color:rgba(179,179,179,1);
        line-height:1.85rem;
        background-image: url('../Imgry/fangdajing.png');
        background-repeat:no-repeat;/*图标是否重复*/
        background-position: 33% 50%;
        -webkit-background-size: 2rem 2rem;
        background-size: 2rem 2rem;
    }

以上是我目前的代码，这个问题先码一下。如果有好的解决办法的话欢迎解答。

2019年9月4日10:33:43：今天重新想到了这个问题，并且想到了用JS代码来试着解决。

之前的问题在于搜索图标与搜索框内的文字间距无法固定，所以我想采用通过flex来设置图标与文字的定位，把搜索框设置为绝对定位，当用户点击搜索框时把图标与文字隐藏就能实现相同的效果，同时能解决间距的问题。

上代码：

<div class="body1-div">
            <img src="Image/fangdajing.png"><p>请输入搜索内容</p><input class="flag1">
        </div>

CSS

.body1-div{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10rem;
        padding: 1rem 2rem;
    }
    .body1-div img{
        z-index: 5;
        display: block;
    }
    .body1-div p{
        margin-left: 1rem;
        height: 8rem;
        font-size: 1.6rem;
        line-height: 8rem;
        z-index: 5;
        display: block;
    }
    .body1-div input{
        position: absolute;
        width: 95%;
        height: 8rem;
        border-radius: 20px;
        background: rgba(221,221,221,1);
    }

$(".body1-div").click(function () {
        $("p").css("display",function () {
            return "none";
        });
        $("img").css("display",function () {
            return "none";
        });
    });

可以看到这个JS只实现了初步的功能，后面还能加很多东西，例如用户不在焦点搜索框时可以考虑重新把图标和文字重新加回去，还有用户输入的文字格式也没设置。不过都无所谓了，因为这些要看具体项目来设置。现在就提供一个思路。

2019年9月4日15:08:33：

实现了焦点不在搜索框且没有输入搜索内容时图标、文字重新出现的功能。

$(document).ready(function () {
        $(".body1-div").click(function () {
            $("p").css("display",function () {
                return "none";
            });
            $("img").css("display",function () {
                return "none";
            });
        });
    });
    $(function () {
        $(document).bind("click",function (e) {
            if($(e.target).closest(".body1-div").length == 0 && $(e.target).closest(".flag1").length == 0){
                if($(".flag1").val().length == 0){
                    $("p").css("display",function () {
                        return "block";
                    });
                    $("img").css("display",function () {
                        return "block";
                    });
                }
            }
        })
    })

[2019081309431190.png]: /images/20211101/53daf998d6ad431d9cee6fad10766b06.png
[20190813094728582.png]: https://img-blog.csdnimg.cn/20190813094728582.png
[20190813094753896.png]: /images/20211101/ea47f3a555fa48eaba91d2ea499a16dd.png