Question

我在文字字段中有一张图片，想知道如何绑定到该图片，以便我知道用户何时点击图片请参阅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;
  }

Answer 1

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

<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跟踪单个点击。如果您需要有关该部分的帮助，请询问并解释。

文本字段中的可点击图像

1 个答案: