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

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

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

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

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

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

<div class="bady1-block1"><input type="text" name="" value="" class="bady1-block1-input" placeholder="输入你想搜索的"/>
</div>

.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";});}}})
})

在输入框加入搜索图标的问题相关推荐

android 移除自己view,Android自定义View-带删除和搜索图标的EditText
效果图: 这里写图片描述直接撸代码: public class SearchEditText extends EditText { private static final String TAG = ...
html、css做一个带搜索图标的搜索框
html.css图像代替提交按钮做个搜索框图像形式的提交按钮与普通提交按钮在功能上基本相同,只是它用图像代替了默认的提交按钮,外形上更加美观.需要注意的是,必须为其定义src属性指定图像的url地 ...
毕业论文找文献是个问题，我直接用python把全网文献爬了一遍，这波就很舒服
文章目录一.写在前面二.准备工作三.开始爬取四.效果展示一.写在前面马上要毕业了兄弟们,毕业论文是个麻烦事,论文要的资料得一条一条去网上查看,那多浪费时间,咱直接写个爬虫,批量下载慢慢看, ...
2023届计算机专业弄潮儿如何快速找毕业论文文献？
人生苦短,我用Python 一.准备工作软件选择 Python3.8 pycharm 模块 requests #模拟请求 Selenium # 浏览器自动化操作 win+r打开搜索框,输入cmd按确 ...
Android App监听软键盘按键的三种方式（转）
最近有类似需求,在csdn上刚好发现,粘贴过来,以防止忘记喽前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的&quo ...
Android App监听软键盘按键的三种方式
前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的"GO"按键加载url页面:在点击搜索框的时候,点 ...
iOS开发UI篇 -- UISearchBar 属性、方法详解及应用（自定义搜索框样式）
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
监听android 上的完成按键
edittext.setOnEditorActionListener(new TextView.OnEditorActionListener() { @Override public boolean ...
键盘-App监听软键盘按键的三种方式
前言: 我们在android手机上面有时候会遇到监听手机软键盘按键的时候,例如:我们在浏览器输入url完毕后可以点击软键盘右下角的"GO"按键加载url页面:在点击搜索框的时候,点 ...

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

在输入框加入搜索图标的问题相关推荐

最新文章

热门文章