要求：
1、input的右邊添加一個自定義icon圖標
2、鼠標放到icon上cursor變成pointer
3、點擊icon能觸發自定義事件。
4、不影響input的使用。
請教各位了。不要貼設置背景圖的icon的回复哦，背景是無法監聽到事件的。
如何給html 的input輸入框添加一個icon，並且能夠監聽到icon的點擊事件
- 写回答
- 好问题 0 提建议
- 关注问题
分享- 邀请回答
-
2条回答 默认 最新
jinnianshilongnian 2012-12-05 17:17关注这样不久行了？
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报 分享
- 2020-09-02 09:15接下来，我们需要为这个覆盖层添加点击事件监听器，例如使用jQuery： ```javascript $(document).ready(function() { $('.input-group > span:last-child').on('click', function() { // 在这里编写点击事件的...
- 2023-04-24 10:58创建一个基础的input输入框，并为其绑定一个特殊的class，如`layui-input-tag`，以便后续通过JS进行操作： ```html <input type="text" id="layui-input-tag" class="layui-input layui-input-tag"> ``` **二、CSS...
- 2024-06-21 17:52LiYan18j的博客 所以可以通过自定义插槽的方式来实现，所以我们需要手动添加图标，并使用插槽提供的方式来绑定事件。可是发现 :suffix-icon="Search"无法直接绑定事件。最初我想要实现给图标设置一个点击事件。
- 2022-02-28 13:59创建一个包含 input 的 slot，当点击节点时显示该 input，用户编辑后保存更新。这需要监听 `@node-click` 事件并处理编辑逻辑： ```html ... , data }" class="custom-tree-node"> <i class="custom-icon" :...
- 2024-11-02 23:10夕阳的刻痕425的博客 若依前端vue 下拉联动输入框
- 2019-06-01 04:46在网页设计中，"带图标的input输入框"是一个常见的交互元素，它通过结合图标与文本输入框，提升用户界面的美观度和易用性。这样的设计可以使用户更直观地理解输入框的目的，例如，一个搜索图标常用于搜索框，锁型...
- 2019-06-27 10:25xh-code的博客 $("#term").bind('input propertychange', function () { var term = $("#term").val(); if (!type.test(term)) { $("#message").html(" <a style='color:r...
- 2020-12-28 19:58旋叶芦荟 ~~~的博客 {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":5,"count":5}]},"card":[{"des":"阿里云函数计算(Function Compute)是一个事件驱动的全托管计算服务。您无需管理服务器...
- 2024-11-14 11:16sunly_的博客 输入框： // 是否显示关闭按钮 bool _showClear = false; // 文字编辑控制器，监听搜索框的变化。 final TextEditingController _controller = TextEditingController(); // 输入框发生变化事件 void _onChange...
- 2023-04-28 09:57ToOTOooo的博客 【代码】antdv vue3 input输入框删除图标。
- 没有解决我的问题, 去提问
