javascript - 文字栏位中的可点击图片

我在一个文本字段中有一个图像，想知道如何绑定到该图像，以便我可以知道用户何时单击该图像，请参见fiddle

    First name: <input type="text" id="nameField" name="firstname" autocomplete="off">



  #nameField {
    background-image: url(https://raw.githubusercontent.com/tawrahim/testAssets/master/warn.png);
    background-position: 7px 7px;
    background-repeat: no-repeat;
    padding-left:30px;
    height: 30px;
  }

最佳答案

使用包含此图像（作为背景）的方式，能够有效计算单击次数的唯一方法是跟踪文本框本身的单击。最好的解决办法是做类似的事情：

<div class="form-field">
    <input type="text" id="nameField" name="firstname" autocomplete="off">
    <img src="source/of/the/image.jpg" alt="Your image" class="input-icon" />
</div>

<style>
    .form-field { position: relative; }
    .form-field #nameField { padding: 2px 10px 2px 24px; line-height: 20px; } /* you should not target a single textbox with an id in css, using a class is less processing.. consider changing this to a class instead */
    .form-field .input-icon { position: absolute; max-height: 20px; max-width: 20px; left: 2px; top: 2px; z-index: 2; }
</style>

这将允许图像与输入字段分离，这将允许您通过JS跟踪单个单击。如果你在这方面需要帮助，尽管问我，我会解释的。

关于javascript - 文字栏位中的可点击图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24093728/