Javascript 文本框内的可单击图标

我正在尝试在文本框中插入一个应该可以单击的图像。请看一下到目前为止我编写的代码。我确实创建了一个类，并在其中插入了一个背景图像

现在，我的问题是，我应该如何使其可点击

$（文档）.ready（函数（）{
$（'.icon'）。单击（函数（）{
$（'.text here'）.innerHTML=“请输入您的用户名”；
});
});
。图标{
背景图片：url(http://directorzcut.com/modules/aqb/profile_mp3_player/templates/base/images/icons/popout.png);
背景重复：无重复；
背景位置：左；
光标：指针；
}
.文本框{
左侧填充：20px；
}

使用
$（'.text here'）.html（“请输入您的用户名”）


$（文档）.ready（函数（）{
$（'.icon'）。单击（函数（）{
$（'.text here'）.html（“请输入您的用户名”）；//仅更改此行
});
});
。图标{
高度：20px；
宽度：20px；
边缘底部：-5px；
}
.文本框{
左侧填充：20px；
}

试试这个

Html

<div class="header-search">
                            <input  type="text">
                            <a href="javascript:;" id="link" >
                                <img class="img-seach" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png">
                            </a>
                        </div>

脚本

$('#link').click(function(){
    alert("clicked");
  })

背景图像不是元素，因此不可单击。您应该将图标作为一个单独的元素，并将
click
处理程序分配给它

新创建的图标元素应该是
输入
的同级元素，并在为
输入
元素指定适当的
左填充
值后，使用css将其放置在图标元素的顶部

查看此演示：


$（'#container.icon'）。在（'click'，function（）上{
console.log（'BOOYAAAA'）；
});
#容器{位置：相对；}
输入{左填充：20px；}
.图标{
显示：块；
位置：绝对位置；
顶部：4px；
左：4px；
宽度：13px；
高度：13px；
背景色：红色；
}
在我的理解中，正确的方法是拥有一个

试试这个

右键单击图标并在“新建”选项卡中打开它


$（文档）.ready（函数（）{
$（'.icon'）。单击（函数（）{
$（'.text here'）.innerHTML=“请输入您的用户名”；
});
});
。图标{
显示：内联块；
背景图片：url(http://directorzcut.com/modules/aqb/profile_mp3_player/templates/base/images/icons/popout.png);
背景重复：无重复；
背景位置：左；
位置：绝对位置；
宽度：20px；
高度：20px；
顶部：-1px；
左：7px；
z指数：1；
光标：指针；
颜色：蓝色；
}
.文本框{
左侧填充：20px；
位置：相对位置；
}
.组{
位置：相对位置；
}


如果我理解正确，您可以使用
标签
元素将
img
包装为
for
指针指向输入

单击
标签时，
输入将获得焦点

我正在使用
指针事件：none
在不单击元素的情况下禁用对
输入的聚焦。（
指针事件
是不是跨浏览器）

此外，我还修复了您的js（
.html（）
而不是
.innerHTML=
）


$（文档）.ready（函数（）{
$（'.icon'）。单击（函数（）{
$（'.text here'）.html（'请输入您的用户名'）；
});
});
。输入包装器{
位置：相对位置；
}
.图标{
位置：绝对位置；
最高：50%；
左：5px；
z指数：1；
高度：10px；
页边顶部：-5px；
}
.图标img{
显示：块；
}
.文本框{
左侧填充：20px；
高度：30px；
宽度：250px；
/*指针事件：无*/
}

图标在哪里，图标没有显示在输出中。很抱歉，我错过了css部分。让我编辑它，这很好，但只有图标区域应该是可点击的。我该怎么做？@Harish然后你必须创建一个独立的图标元素，而不是在输入框中。实际上我不想使用绝对定位，除了绝对定位还有其他方法吗？可能是，但我只有这个解决方案@Harish@Harish我能问一下你对
立场：绝对？在你的情况下，这是正确的方向，我在回答中也解释了。实际上，当我使用绝对定位时，图像会根据需要定位在文本框内，但它没有响应。这段代码很好，但文本框只有在我单击标签图标时才会聚焦@Mosh说，图标也应该在响应屏幕上工作。这意味着，每当文本框的大小减小时，图标应位于文本框内的相同位置。这可以做到吗？我想你只需要点击图标就可以启用tetxbox。反正我把它拿走了。我还改变了文本框的大小，图标相对文本框保持在相同的位置。如果不行，你是什么意思？是的，这就是我现在想要的。谢谢：）@Mosh-Feu
$('#link').click(function(){
    alert("clicked");
  })