如何用JS实现在输入文本框控件里添加一个icon，实现效果如下图，

不需要点击效果，只需要固定显示即可

不想使用水印添加文本格式的小图标的形式，

大概思路在文本框的初始化事件里写刷新函数，前端不够熟练求大佬指点格式

需要考虑输入文字后的显示问题，例如同级内添加span

FineReport 机智的ywj 发布于 2022-7-20 12:24 （编辑于 2022-7-20 15:46）

1min目标场景问卷

立即参与

回答问题关注问题

悬赏：5 F币 + 添加悬赏

提示：增加悬赏、完善问题、追问等操作，可使您的问题被置顶，并向所有关注者发送通知

共3回答

最佳回答

shirokoLv6资深互助
发布于2022-7-20 13:45（编辑于 2022-7-20 16:11）

-----

控件初始化后事件：

this.editComp.css("cssText","background:url(/webroot/decision/view/report?op=toolbar_icon&id=toolbar-image.png) no-repeat ;text-indent:20px;")

url里面的地址改成你的放大镜的图片地址

举报收起评论(6)

机智的ywj(提问者) 这个显示应该固定在开始位置，是不是应该以span形式添加？您回复的方式css(\"background-image\"···）测试后显示效果为文本框的全铺背景图，不太符合

2022-07-20 14:31

shiroko 回复机智的ywj(提问者) 默认是平铺，后面改成 toolbar-image.png) no-repeat 就不会平铺了

2022-07-20 14:38

机智的ywj(提问者) 背景设置显示其实不太合理，文本框要输入的时候它是没有占位的

2022-07-20 15:20

shiroko 回复机智的ywj(提问者) 改了一个新的，20px的缩进可以根据你图片大小修改

2022-07-20 16:11

机智的ywj(提问者) 谢谢大佬，可以再帮我写一下服务器引路径的写法吗？引不到地址，上传的小图标op跟id参数要怎么查啊？

2022-07-20 17:35

还有1条评论点击查看

CD20160914Lv8专家互助
发布于2022-7-20 16:00

这样行不行？

举报收起评论(1)

机智的ywj(提问者) 感谢回答，看起来也是背景图方式实现，很有参考价值

2022-07-21 11:04

promiseykl1988Lv7初级互助
发布于2022-7-20 16:14（编辑于 2022-7-20 17:19）

var html = "<img src='你自己的图片' style='width: 14px;height: 14px;position: absolute;top: 5px;left: 15%;margin-left: -15%;color: #999999;' />";

this.editComp.css("cssText","text-indent:16px;")

this.editComp.after(html);

微信图片_20220720161511.png 具体的JS你自己改下。

4关注人数

665浏览人数

最后回答于：2022-7-20 17:19

活动推荐更多

热门课程更多

请选择关闭问题的原因

确定取消

提问

悬赏者（3）

撤回悬赏（3）

添加悬赏

请选择关闭问题的原因