Javascript 单击窗体内的图标

我想在表单中添加一个图标，并能够单击它并在单击后运行javascript代码。基本上，我知道如何在表单上添加图标，但我不知道如何使用OnClick使其可单击

文本字段的输入代码为 HTML代码：

<input id="cool"
   style=" width:45%; padding:4px; padding-right:25px;" type="text" name="game">

但正如我所说，我不知道应该在何处放置OnClick命令，以便只单击图标。

3种方法：

使用

<input type='text' id='input'>

带有bg图像和

$("#input").click(function(e){if(e.pageX > start_x && e.pageX < end_x && e.pageY > start_y && e.pageY < end_y){
    // open new page
}});

$（“#输入”）。单击（函数（e）{if（e.pageX>start_x&&e.pageXstart_y&&e.pageY

使用此选项：

<div style='position:relative'>
        <input />
        <div style='width:20px;height:20px;position:absolute;top:0;left:0' onclick="//js code to open page"></div>
</div>

使用此代码：

<div>
        <div class='left'></div>
        <div class='right'><input /></div>
</div>
<style>
        .left{float:left;width:25px;height:25px;background-image:url(the_image.png)}
        .right{float:left;width:200px;height:25px;}
</style>

.left{float:left；宽度：25px；高度：25px；背景图像：url（the_image.png）}
.right{float:left；宽度：200px；高度：25px；}

---

添加onclick很容易：

。是的，但在这种情况下，我只希望单击图标，而不希望单击整个文本字段。使用

event.pageX

和

event.pageY

，请参阅；或者在文本框上创建一个可点击的图层。你能解释一下什么是“只让图标可点击”吗？这是文本输入，不是按钮输入或按钮。

<div>
        <div class='left'></div>
        <div class='right'><input /></div>
</div>
<style>
        .left{float:left;width:25px;height:25px;background-image:url(the_image.png)}
        .right{float:left;width:200px;height:25px;}
</style>